SVG排版公眾號(hào)文章〖點(diǎn)擊圖片左右晃動(dòng)〗模板代碼
<!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>公眾號(hào)：懂點(diǎn)君 || 視頻號(hào)：懂點(diǎn)君 || 微信號(hào)：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="公眾號(hào)：懂點(diǎn)君 || 視頻號(hào)：懂點(diǎn)君 || 微信號(hào)：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"> ? ? ? ? ? ? ? ? ? ?<!-- 移動(dòng)整體，使整個(gè)圖片完整顯示 --> ? ? ? ? ? ? ? ? ? ?<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> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<!-- 因?yàn)閞otate默認(rèn)是原點(diǎn)旋轉(zhuǎn)，把旋轉(zhuǎn)點(diǎn)移動(dòng)到中間 --> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<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"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<!-- 晃動(dòng)的圖片 --> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<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="公眾號(hào)：懂點(diǎn)君 || 視頻號(hào)：懂點(diǎn)君 || 微信號(hào)：dong_dian_jun"></animate> ? ? ? ? ? ? ? ? ? ?<foreignObject width="1000" height="2000"> ? ? ? ? ? ? ? ? ? ? ? ?<!-- 默認(rèn)顯示的圖片 --> ? ? ? ? ? ? ? ? ? ? ? ?<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>
