SVG排版 | 深色模式彩蛋
发布于 3 年前 作者 xiuyinglei 4128 次浏览 来自 分享

模板效果

点击查看效果

模板代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
    <title>公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun</title>
    <style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
    <div class="rich_media_content" style="visibility: visible;">
        <section style="font-size: 0;line-height: 0;weixin: dong_dian_jun;">
            <!-- 深色内容区域 -->
            <section style="height:0;">
                <img src="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTvHPo3VqG1oW5PIq7s6YCxjvZNRgVsuHS0xkAtZd4Inr8tCz1IaohwWJkFCQgyiat0zYeiaJriawibBw/0?wx_fmt=jpeg"/>
            </section>
            <!-- 遮层 -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 1300" style="weixin: dong_dian_jun;background-color:#fff;" label="公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun">
                <path d="M355.31,273.62q.27,6.33.84,10.83a68.58,68.58,0,0,0-11.67,10l-5.07-6.89a9.17,9.17,0,0,0,1.9-5.91V258.85h-5.76v-9.14h14.62v27.64Q352.29,275.87,355.31,273.62ZM345,226.44q4.84,6.33,9.07,12.87l-8.23,4.92a141.29,141.29,0,0,0-8.43-13.36Zm8.16,23.13h20.74v-3.09H357v-6h16.88v-3.09H355.38v-6.05h18.49v-5.62h10.05v5.62h19.76v6.05H383.92v3.09h17.86v6H383.92v3.09h21.45v6.05H353.13Zm14.48,45.14h-9.42V258.29h42V285c0,2.91-.64,5.13-1.93,6.68a7.68,7.68,0,0,1-5.5,2.64q-3.57.32-14.5.38c-.52-2.15-1.22-4.64-2.11-7.45q8.92.42,10.68.42,3.94,0,3.94-3.44v-.92H367.61Zm23.13-29.81H367.61v3.38h23.13Zm-23.13,12.59h23.13v-3.38H367.61Z"/>
                <path d="M337.38,319.59H357a75.68,75.68,0,0,0,2.67-7.95l10.62.78q-.94,3.66-2.18,7.17h36.35v9.35H364.31a93.11,93.11,0,0,1-10.13,16.63v35.82h-9.42V356.26c-1.74,1.68-3.54,3.34-5.42,4.95q-2-6.39-3.93-10.89a82.13,82.13,0,0,0,17.19-21.38H337.38Zm19.33,49.22h19.13V353.06H360.51v-9.28h15.33V331.12h10.05v12.66h15.54v9.28H385.89v15.75h18.7v9.28H356.71Z"/>
                <path fill="#e54e4e" d="M341.45,417.52q6.82,4.78,12.52,9.56l-6.61,7.32a133.75,133.75,0,0,0-12-10.27Zm3.1,19.83a65.67,65.67,0,0,0,9.21,3.65q-5,15.48-8.23,26.79-5-1.89-9.56-3.3Q340.11,453.74,344.55,437.35Zm-2.32-38.53q6.67,4.14,13.22,9L349.19,415a148.46,148.46,0,0,0-12.8-9.91ZM404,442.13H387.47a44.24,44.24,0,0,0,18.18,12.73c-1.74,2.72-3.56,5.74-5.49,9.07A49,49,0,0,1,384,449.09v18.7h-9.42V448.53a71,71,0,0,1-16.73,16.24q-2.46-4.29-5.35-8.37a69.48,69.48,0,0,0,18-14.27H355.23V434h19.34v-9.28H384V434h20Zm-26.58-22.5q-8.43,6.83-15.82,11.81l-5.76-6.61a103.38,103.38,0,0,0,15.33-11.18Zm-21.37-2.11v-15.4h46.47v15.4h-9.07v-7.24H365.15v7.24Zm25.31,2.11,5.84-5.91q8.85,6.12,15.61,11.25l-6,6.61Q389.2,425.25,381.39,419.63Z"/>
                <path fill="#e54e4e" d="M389.76,490.21v7.73l-6.08,6.75H398.2v26.16H352.63V537q0,6.68,6.89,6.68h28.41a9.49,9.49,0,0,0,4.57-.93,4.52,4.52,0,0,0,2.23-2.64,79.87,79.87,0,0,0,1.64-8.81c4.12,1.6,7.08,2.67,8.86,3.24a107,107,0,0,1-2.68,10.81,9.12,9.12,0,0,1-4.86,5.39q-3.72,1.88-10,1.87H356.5q-13.85,0-13.85-12.94V512.92c-.87.68-1.76,1.34-2.67,2q-2.12-4.42-4.85-8.93,13.56-9,20.81-21.23l10.9.77q-1.3,2.38-2.78,4.71Zm-37.55,14.48H372l5.8-6.53H358.26A87.94,87.94,0,0,1,352.21,504.69Zm.42,18.14h13V512.71h-13Zm35.72,0V512.71h-13v10.12Z"/>
                <path fill="#e54e4e" d="M404.73,625.2h-16q6.69,5.06,16.88,6.61-2.19,3.93-4.64,9.07-12.87-3.81-19.62-13.43-5.34,9.42-19.83,13.85a49,49,0,0,0-5.41-8.3q12.23-2.54,16.8-7.8h-15v-6.82h18.35a19.73,19.73,0,0,0,.56-3.59H361.7V607.2l-5.41,5.34q-1.62-2.46-3.45-5.06v33.18h-8.71V610.92a91.79,91.79,0,0,1-6.61,14.14q-.7-4.86-2.25-12.87a83.37,83.37,0,0,0,8-18.42H336v-8.3h8.16V571.69h8.71v13.78h6.54v8.3h-6.54v4q5,4.65,8.86,8.58v-16.8h40.5v25.24H385.68c-.09,1.27-.23,2.46-.42,3.59h19.47Zm-9.42-37.34H387v-3.94H376.26v3.94H368v-3.94h-9.07v-7H368v-5.27h8.3V577H387v-5.27h8.29V577H405v7h-9.71Zm-1.83,7.95H370.42v3.72h23.06Zm0,12.79v-3.87H370.42v3.87Z"/>
                <path fill="#e54e4e" d="M338.64,687.06h31.78v9.21H359.88v13.67l13.92-2.07c-.14,4.59-.19,8-.14,10.12l-37,5.42-1.19-10.48,14.34-1.69v-15H338.64Zm-3.09-16.95h36.56l-.77-12.37h10.54q.18,6.21.53,12.37h9.67q-3-3.93-6-7.1l6.26-4.71q4.14,4.29,8,8.93l-3.73,2.88h7.17v9.28H383q1.59,22.89,4.24,30t5,7.16a1.47,1.47,0,0,0,1.16-.74,14.8,14.8,0,0,0,1.25-4.2q.72-3.46,1.39-9.19a61.55,61.55,0,0,0,9.21,4.92q-1.91,13.18-4.64,16.54t-8.3,3.36q-9.92,0-13.89-11.11t-5.69-36.78H335.55Z"/>
                <path d="M379.84,766.07q11.4,8.16,22.86,16.95l-7.25,8.86q-12-10.33-21.79-17.65v39H362.27v-55H336.39v-9.91h67.92v9.91H373.66v14Z"/>
                <path d="M336.25,843.83h9.91v-13h10.27v13h9.42v9.07h-9.42v10l10.05-1.52c-.14,2.44-.18,5.6-.14,9.5l-9.91,1.54v17.23a9.5,9.5,0,0,1-1.74,6.08,7.51,7.51,0,0,1-5.48,2.51q-3.75.35-11.13.55-.7-4.29-2.11-9.56c1.83.14,3.71.21,5.66.21s3-.24,3.64-.72a3.26,3.26,0,0,0,.89-2.66v-12l-9.63,1.69-1.26-10.2c3.25-.33,6.89-.76,10.89-1.3V852.9h-9.91Zm30.45-9.29h38.6v9.64h-9.5v42.75q0,5.13-2.14,7.91a8.5,8.5,0,0,1-6.1,3.21q-4,.45-16.93.55A106.72,106.72,0,0,0,368,887.7q4.79.34,9.21.35l3.08,0a5,5,0,0,0,3.74-1.41,5.72,5.72,0,0,0,1.27-4V844.18H366.7Z"/>
                <path d="M335.76,947.31h16.31V930.08H339.63v-9.14h62.78v9.14H391.09v17.23h14.28v9.14H391.09v28.83H380.9V956.45H362.06q-.71,12.79-4.8,19.22t-12.5,11q-3.94-3.45-8.86-7.18a38.59,38.59,0,0,0,10.81-8.33q4.31-4.84,5-14.73H335.76Zm26.51,0H380.9V930.08H362.27Z"/>
            </svg>
        </section>
    </div>
</body>
</html>
1 回复

有问题微信沟通:dong_dian_jun

回到顶部