公众号SVG图文『互动伸缩展开长图』模板代码
模板效果
模板代码
<section style="width: 330px;margin: 0 auto;overflow: hidden;align-self: flex-start;font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;box-sizing: border-box;">
<!------------------------ 展开的区域 ------------------------>
<section style="height: 0px;overflow: visible;box-sizing: border-box;">
<section style="display: inline-block;width: 100%;vertical-align: top;box-sizing: border-box;">
<section style="display: inline-block;vertical-align: middle;font-size:0;line-height: 0;width: 100%;box-sizing: border-box;">
<img width="100%"src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTcia6rR7MJ9dJctQDKjkh0KScHmISibmcRrjJgl9hjWE01ag5ibLJqLsAS310KR5thqoWPQbjWEHW0w/0?wx_fmt=png">
</section>
<section style="display: inline-block;vertical-align: middle;font-size:0;line-height: 0;width: 100%;box-sizing: border-box;">
<img width="100%"src="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTcia6rR7MJ9dJctQDKjkh0KZjVPLq0e73L8wfJAMKLnJoboLibiaicicdVkwbhkwLtnHTAu5nuukZpMnw/0?wx_fmt=png">
</section>
</section>
</section>
<!------------------------ 动画的区域 ------------------------>
<section style="overflow: visible;box-sizing: border-box;" powered-by="xiumi.us">
<section style="display: block;width: 100%;vertical-align: top;height: auto;box-sizing: border-box;">
<!------------------------ 第三个动画 ------------------------>
<section style="display: flex;box-sizing: border-box;">
<svg height="500" style="width: 100%;box-sizing: border-box;background-size: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-color: rgb(254, 254, 254);background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTcia6rR7MJ9dJctQDKjkh0KKDF9tGmBicfddd6iberwdUzaHJyJ4HVJKoqCMiaCMicqVNLk0rsFLYGacQ/0?wx_fmt=png);transform: translateZ(0)" width="100%" xmlns="http://www.w3.org/2000/svg">
<!-- 文字动画提示 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<g style="box-sizing: border-box;">
<text font-family="microsoft yahei,sans-serif;" font-size="18" font-weight="bold" y="400" x="165" fill="#fff" text-anchor="middle" dominant-baseline="middle" opacity="0">
敢继续点吗？
<animate attributeName="opacity" values="0;1;0" begin="0s" dur="2s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
<animate fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="1" restart="never"></animate>
<animate fill="freeze" attributeName="height" begin="click + 1s" dur="1.6" values="500;0" calcMode="spline" restart="never" keyTimes="0;1" keySplines="0.82 0 0.18 1.0"></animate>
<animate fill="freeze" attributeName="width" begin="click + 1s" from="1" to="0" dur="0.01" restart="never"></animate>
<animate fill="freeze" attributeName="height" begin="click + 2.6s" dur="0.2" restart="never" from="0" to="1078"></animate>
</svg>
</section>
<!------------------------ 第二个动画 ------------------------>
<section style="display: flex;height: 500px;margin-top: -500px;box-sizing: border-box;">
<svg style="width: 100%;box-sizing: border-box;background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-color: rgb(254, 254, 254);background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTcia6rR7MJ9dJctQDKjkh0KQbFujWeIDSib8vHsUct1hWibkFs2PnHHQuoah9kMY6rZVFrJezZ11eGw/0?wx_fmt=png);transform: translateZ(0)" width="100%" xmlns="http://www.w3.org/2000/svg">
<!-- 文字动画提示 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<g style="box-sizing: border-box;">
<text font-family="microsoft yahei,sans-serif;" font-size="18" font-weight="bold" y="400" x="165" fill="#fff" text-anchor="middle" dominant-baseline="middle" opacity="0">
再点一下
<animate attributeName="opacity" values="0;1;0" begin="0s" dur="2s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
<animate style="box-sizing: border-box;" fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="0.1" restart="never"></animate>
<animate style="box-sizing: border-box;" fill="freeze" attributeName="width" begin="click + 0.1s" from="1" to="0" dur="0.01" restart="never"></animate>
</svg>
</section>
<!------------------------ 第一个动画 ------------------------>
<section style="display: flex;height: 500px;margin-top: -500px;box-sizing: border-box;">
<svg style="width: 100%;box-sizing: border-box;background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-color: rgb(254, 254, 254);background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTcia6rR7MJ9dJctQDKjkh0KiaEQ5vn80sbRCGESuiak7cNe52yrbAJ3ay5kEnb6djsK4D47rIq0CY1w/0?wx_fmt=png);transform: translateZ(0)" width="100%" xmlns="http://www.w3.org/2000/svg">
<!-- 文字动画提示 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<g style="box-sizing: border-box;">
<text font-family="microsoft yahei,sans-serif;" font-size="18" font-weight="bold" y="400" x="165" fill="#fff" text-anchor="middle" dominant-baseline="middle" opacity="0">
点击一下
<animate attributeName="opacity" values="0;1;0" begin="0s" dur="2s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
<animate fill="freeze" attributeName="opacity" begin="click" from="1" to="0" dur="0.1" restart="never"></animate>
<animate fill="freeze" attributeName="width" begin="click + 0.1s" from="1" to="0" dur="0.01" restart="never"></animate>
</svg>
</section>
</section>
</section>
</section>
模板应用
强力驱动