SVG排版 | 围绕中心点缩放操作
发布于 3 年前 作者 lei88 1933 次浏览 来自 分享

模板效果

点击查看代码

模板代码

<!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;">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 750 1300" style="background-color: #e60000;weixin: dong_dian_jun;pointer-events: none;">
            <g data-name="公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun" transform="translate(375 650)">
                <g>
                    <animate attributeName="opacity" values="0;1;0" begin="0" dur="10s" fill="freeze" repeatCount="indefinite"></animate>
                    <animateTransform attributeName="transform" type="scale" values="50;10;50" begin="0s" dur="10s" restart="whenNotActive" repeatCount="indefinite" fill="freeze"></animateTransform>
                    <foreignObject x="-375" y="-650" width="750" height="1300" style="transform: scale(0.1)">
                        <svg viewBox="0 0 750 1300" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQNxMsCKzLZ1U6rJdj4WuTtuyvDQ7UwaKRf6K1rnCC4h4MUMicXIUraz2PFcIrv7040fxaLtd9JB6g/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;"></svg>
                    </foreignObject>
                </g>
            </g>
        </svg>
    </div>
</body>
</html>
1 回复

有问题微信沟通:dong_dian_jun

回到顶部