SVG排版公众号文章〖点击图片左右晃动〗模板代码
发布于 3 年前 作者 mzhou 3326 次浏览 来自 分享

模板效果

点击查看文章

模板代码

<!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;" name="公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun">
        <section style="overflow: hidden;user-select:none;weixin: dong_dian_jun;line-height: 0;" >
            <section style="height: 0;">
                <!-- 背景图 -->
                <svg style="display: block;background-image: url(【图片地址】);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 1000 2000">
                    <!-- 移动整体,使整个图片完整显示 -->
                    <g transform="translate(500 1000)">
                        <g>
                            <animateTransform attributeName="transform" type="scale" values="1;0.75;1.15;1.15;1.15;1.15;1.15;1;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
                            <g>
                                <!-- 因为rotate默认是原点旋转,把旋转点移动到中间 -->
                                <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0;-12;12;-12;12;-12;0;0" dur="1.5s" repeatCount="indefinite"></animateTransform>
                                <foreignObject x="-500" y="-1000" width="1000" height="2000">
                                    <!-- 晃动的图片 -->
                                    <svg style="display: block;background-image: url(【图片地址】);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 1000 2000"></svg>
                                </foreignObject>
                            </g>
                        </g>
                    </g>
                </svg>
            </section>
            <section style="transform: rotateZ(0deg);line-height: 0;weixin: dong_dian_jun;pointer-events: none;">
                <svg viewBox="0 0 1000 2000" style="max-width: none !important;weixin: dong_dian_jun;pointer-events: none;">
                    <!-- 透明度隐藏 -->
                    <animate attributeName="opacity" values="1;0" dur="0.6s" begin="click" restart="never" name="公众号:懂点君 || 视频号:懂点君 || 微信号:dong_dian_jun"></animate>
                    <foreignObject width="1000" height="2000">
                        <!-- 默认显示的图片 -->
                        <svg style="display: block;background-image: url(【图片地址】);background-size: 100%;background-repeat: no-repeat;line-height: 0;pointer-events: painted;vertical-align: top;" viewBox="0 0 1000 2000">
                            <!-- 宽度隐藏 -->
                            <animate attributeName="width" begin="click+0.5s" restart="never" dur="0.000001s" to="0" fill="freeze"></animate>
                        </svg>
                    </foreignObject>
                </svg>
            </section>
        </section>
    </div>
</body>
</html>
1 回复

有疑问的可以留言哦

回到顶部