SVG排版公众号文章『倒计时自动展开长图』模板代码
发布于 3 年前 作者 xiegang 4639 次浏览 来自 分享

模板效果

点击查看效果

模板代码

<!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;" data-label="H5 & SVG定制咨询微信：dong_dian_jun">
        <section style="overflow: hidden;font-size: 0px;line-height: 0;">
            <section style="height: 0">
                <!-- 长图内容 -->
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 6000" style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTicawWLnEhlXCBDwzYX89nLHFZJv0DgwiagxswoyNzY6uVu1npasAZy7uiakS60kEoMO215H19P5KeA/0?wx_fmt=gif); background-size: 100% auto;background-repeat: repeat-y;background-color: #000;"></svg> 
            </section>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-540 -900 1080 1800" style="display: block; margin: 0 auto; max-width: none !important;weixin: dong_dian_jun;pointer-events: none;" width="100%" data-label="H5 & SVG定制咨询微信：dong_dian_jun">
                <!------------------------ 展开长图动画 ------------------------>
                <animate attributeName="width" begin="2.5" restart="never" calcMode="spline" dur="100s" fill="freeze" values="100%;333%;333%" keyTimes="0;0.02;1" keySplines="0.4 0 0.5 1.0;0.4 0 0.5 1.0"></animate>

                <!------------------------ 隐藏展开区域 ------------------------>
                <set attributeName="visibility" from="visible" dur="0.01s" to="hidden" fill="freeze" begin="2.5"></set>

                <!------------------------ 【倒计时数字3】 ------------------------>
                <g data-author="懂点君">
                    <foreignObject x="-540" y="-900" width="1080" height="1800">
                        <svg width="1080" height="1800" style="display: block;weixin: dong_dian_jun;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTicawWLnEhlXCBDwzYX89nLYQR4ATwvLfYp5Dr6XesqMliaqFAM1xdwUazbD6Bna962WTWmxuae1qQ/0?wx_fmt=png);background-size: 100% auto;background-repeat: no-repeat;pointer-events: none;" xmlns="http://www.w3.org/2000/svg"></svg>
                    </foreignObject>
                    <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" restart="never" begin="1.2s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                    <animate attributeName="opacity" restart="never" begin="1.4s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>

                    <!------------------------ 【倒计时数字2】 ------------------------>
                    <g data-author="懂点君">
                        <foreignObject x="-540" y="-900" width="1080" height="1800">
                            <svg width="1080" height="1800" style="display: block;weixin: dong_dian_jun;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTicawWLnEhlXCBDwzYX89nLvy5kywrflX5TETH5V16CFEap9k7eibMxvw8ss7sk1xfwDCU9T8JGoqg/0?wx_fmt=png);background-size: 100% auto;background-repeat: no-repeat;pointer-events: none;" xmlns="http://www.w3.org/2000/svg"></svg>
                        </foreignObject>
                        <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" restart="never" begin="0.6s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                        <animate attributeName="opacity" restart="never" begin="0.8s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>

                        <!------------------------ 【倒计时数字1】 ---------------------->
                        <g data-author="懂点君">
                            <foreignObject x="-540" y="-900" width="1080" height="1800">
                                <svg  width="1080" height="1800" style="display: block;weixin: dong_dian_jun;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTicawWLnEhlXCBDwzYX89nLk4KxybS4iaVYJ9oiajLguoZZxE6aQqoa8BD3BGh4jAXpvSJCm20WEiccg/0?wx_fmt=png);background-size: 100% auto;background-repeat: no-repeat;pointer-events: none;" xmlns="http://www.w3.org/2000/svg"></svg>
                            </foreignObject>
                            <!-- 缩放 -->
                            <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0; 0.3; 1" restart="never" begin="0s" values="1; 0.90; 1.5;" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                            <!-- 透明度 -->
                            <animate attributeName="opacity" restart="never" begin="0.2s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
                        </g>
                    </g>
                </g>
            </svg>
        </section>
    </div>
</body>
</html>
回到顶部