SVG排版公众号文章『循环弹性轮播大图』模板代码

模板效果

模板代码

<section style="display: block; overflow: hidden; background-color: #fff;">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1500" style="display: block; margin: 0 auto;" width="100%">

<g>

<foreignObject x="0" y="0" width="1080" height="1500">

<svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hPvlrrQlWLpH4EOp5eKgJfeul4DRAgnvsruhoKiaiaBJzf8jUQESjtkdA/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>

</foreignObject>

</g>

<!-- 第四张 -->

<g>

<foreignObject x="0" y="0" width="1080" height="1500">

<svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hx3RzfxPKicszFP9wHJ8W9YpZLcaChcdWXNUbVqvnuibcW22reNQFhvKw/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>

</foreignObject>

<!-- 动画 -->

<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; 0 0; 0 0; 0 0; 0 0; -80 0; 1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>

</g>

<!-- 第三张 -->

<g>

<foreignObject x="0" y="0" width="1080" height="1500">

<svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hvXUjCN263aM0kibACPE6AkXhspM3dINzs11pz1OBEN6bO2GSktE0aWw/0?wx_fmt=png); background-color: #000; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>

</foreignObject>

<!-- 动画 -->

<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; 0 0; 0 0; 80 0; -1081 0; -1081 0; -1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>

</g>

<!-- 第二张 -->

<g>

<foreignObject x="0" y="0" width="1080" height="1500">

<svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hB1jtWiaoaGgG7FxcxTfKW3VcKUaa17Xzk35cRCnYib3sXKuXIDsfEBFw/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>

</foreignObject>

<!-- 动画 -->

<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 0 0; 0 0; -80 0; 1081 0; 1081 0; 1081 0; 1081 0; 1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>

</g>

<!-- 第一张 -->

<g>

<foreignObject x="0" y="0" width="1080" height="1500">

<svg style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQVs4KnuP6oGtkyicSeBvv4hPvlrrQlWLpH4EOp5eKgJfeul4DRAgnvsruhoKiaiaBJzf8jUQESjtkdA/0?wx_fmt=png); background-color: #fff; background-size: 100%; background-repeat: no-repeat;" viewBox="0 0 1080 1500" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>

</foreignObject>

<!-- 动画 -->

<animateTransform attributeName="transform" type="translate" repeatCount="indefinite" values="0 0; 80 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0; -1081 0;" fill="freeze" begin="0.3s" dur="4s" calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0"></animateTransform>

</g>

</svg>

</section>

主营产品:无铅锡线,有铅锡条,无铅锡条