SVG排版公众号文章〖点击翻页效果〗模板代码
模板效果
模板代码
<!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;">
<section style="display: block;margin: 0 auto;font-size: 0;line-height: 0;weixin: dong_dian_jun;">
<svg style="display: inline-block;width: 100%;pointer-events: none;vertical-align: top;" viewBox="0 0 图片的宽度 外层高度，大于图片高度">
<!-- <animate attributeName="width" restart="whenNotActive" values="100%;0%" dur="0.0001s" begin="click+1.4s" fill="freeze"></animate> -->
<g data-name="底图">
<g data-name="图片内容">
<foreignObject x="0" y="0" width="图片的宽度" height="图片的高度">
<svg style="display: inline-block;background-size: 100%;background-image: url(图片地址);background-repeat: no-repeat;vertical-align: top;pointer-events: none;weixin: dong_dian_jun;" viewBox="0 0 图片的宽度 图片的高度"></svg>
</foreignObject>
</g>
</g>
<g data-name="卡片">
<!-- 向下倾斜25度 -->
<animateTransform attributeName="transform" type="skewY" values="0;25" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 水平方向缩放至0 -->
<animateTransform attributeName="transform" type="scale" values="1 1;0 1" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 透明度 -->
<animate attributeName="opacity" values="1;0" begin="click+1s" dur="0.5s" fill="freeze" restart="whenNotActive"></animate>
<!-- 元素的可见性 -->
<set attributeName="visibility" to="hidden" begin="click+1.4s" dur="0.0001s"></set>
<g data-name="图片内容">
<foreignObject x="0" y="0" width="图片的宽度" height="图片的高度">
<svg style="display: inline-block;background-size: 100%;background-image: url(图片地址);background-repeat: no-repeat;vertical-align: top;pointer-events: none;weixin: dong_dian_jun;" viewBox="0 0 图片的宽度 图片的高度"></svg>
</foreignObject>
</g>
<g data-name="点击触发区域">
<rect opacity="0" width="图片的宽度" height="图片的高度" pointer-events="visible">
<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>
<animateTransform attributeName="transform" type="translate" values="0 0; -9999 0;-9999 0" dur="200s" keyTimes="0;.0001;1" fill="freeze" begin="click+1.4s"></animateTransform>
</rect>
</g>
</g>
<g data-name="卡片">
<!-- 向下倾斜25度 -->
<animateTransform attributeName="transform" type="skewY" values="0;25" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 水平方向缩放至0 -->
<animateTransform attributeName="transform" type="scale" values="1 1;0 1" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 透明度 -->
<animate attributeName="opacity" values="1;0" begin="click+1s" dur="0.5s" fill="freeze" restart="whenNotActive"></animate>
<!-- 元素的可见性 -->
<set attributeName="visibility" to="hidden" begin="click+1.4s" dur="0.0001s"></set>
<g data-name="图片内容">
<foreignObject x="0" y="0" width="图片的宽度" height="图片的高度">
<svg style="display: inline-block;background-size: 100%;background-image: url(图片地址);background-repeat: no-repeat;vertical-align: top;pointer-events: none;weixin: dong_dian_jun;" viewBox="0 0 图片的宽度 图片的高度"></svg>
</foreignObject>
</g>
<g data-name="点击触发区域">
<rect opacity="0" width="图片的宽度" height="图片的高度" pointer-events="visible">
<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>
<animateTransform attributeName="transform" type="translate" values="0 0; -9999 0;-9999 0" dur="200s" keyTimes="0;.0001;1" fill="freeze" begin="click+1.4s"></animateTransform>
</rect>
</g>
</g>
<g data-name="卡片">
<!-- 向下倾斜25度 -->
<animateTransform attributeName="transform" type="skewY" values="0;25" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 水平方向缩放至0 -->
<animateTransform attributeName="transform" type="scale" values="1 1;0 1" begin="click" dur="1.4s" fill="freeze" additive="sum" restart="whenNotActive"></animateTransform>
<!-- 透明度 -->
<animate attributeName="opacity" values="1;0" begin="click+1s" dur="0.5s" fill="freeze" restart="whenNotActive"></animate>
<!-- 元素的可见性 -->
<set attributeName="visibility" to="hidden" begin="click+1.4s" dur="0.0001s"></set>
<g data-name="图片内容">
<foreignObject x="0" y="0" width="图片的宽度" height="图片的高度">
<svg style="display: inline-block;background-size: 100%;background-image: url(图片地址);background-repeat: no-repeat;vertical-align: top;pointer-events: none;weixin: dong_dian_jun;" viewBox="0 0 图片的宽度 图片的高度"></svg>
</foreignObject>
</g>
<g data-name="点击触发区域">
<rect opacity="0" width="图片的宽度" height="图片的高度" pointer-events="visible">
<set attributeName="visibility" to="hidden" begin="click" dur="0.0001s"></set>
<animateTransform attributeName="transform" type="translate" values="0 0; -9999 0;-9999 0" dur="200s" keyTimes="0;.0001;1" fill="freeze" begin="click+1.4s"></animateTransform>
</rect>
</g>
</g>
</svg>
</section>
</div>
</body>
</html>
强力驱动