svg点击效果不停的换图片
svg点击效果不停的换图片
<div class="rich_media_content " id="js_content" style="visibility: visible;"> <section powered-by="yutustudio666" style="line-height: 0;overflow: hidden;pointer-events: none;"><section powered-by="yutustudio666" style="line-height: 0;height: 0;overflow: visible;pointer-events: none;"><section powered-by="yutustudio666" style="line-height: 0;pointer-events: none;"> <section powered-by="yutustudio666" style="line-height: 0;pointer-events: none;"> <svg powered-by="yutustudio666" style="display: inline-block;pointer-events: none;" viewBox="0 0 1280 2501"></svg> </section><section powered-by="yutustudio666" style="line-height: 0;pointer-events: auto;"><section><redpacketcover class="js_redpacketcover js_uneditable" data-coveruri="LzWKVTJDVYOPFkAt" data-bizuin="3242890103" data-receiveimg="http%3A%2F%2Fmmcomm.qpic.cn%2Fwx_redskin%2FuDgxlTbpYHqrKClE8rsicdNiau4s9AkvhXFHcYN7Unp6xBIfXKahVu7A%2F" data-name="%E9%87%91%E5%85%B8SATINE" data-pluginname="redpacketcover" data-orderid="13658088752298590288" data-w="286" data-ratio="1.5664335664335665"></redpacketcover><section class="js_wap_redpacketcover red_package_cover_wrp" data-coveruri="LzWKVTJDVYOPFkAt" wah-hotarea="click"><!--不可操作，这里加className point_event_no--><!--todo 加载中加className red_package_cover__inner__loading--><section class="red_package_cover__inner"><section class="red_package_cover__inner__main"><section class="red_package_cover__body"><!--图片没加载处理，这里加className red_package_cover_img_loading--><span class="red_package_cover_img" style="background-image: url('http://mmcomm.qpic.cn/wx_redskin/uDgxlTbpYHqrKClE8rsicdNiau4s9AkvhXFHcYN7Unp6xBIfXKahVu7A/');"></span></section><section class="red_package_cover__foot"><span class="red_package_cover__access-link">领取红包封面</span></section></section><section class="red_package_cover__extend"><span class="red_package_cover__extend_icon"></span><span class="red_package_cover__extend_info">微信红包封面</span></section></section></section></section></section></section></section><section powered-by="yutustudio666" style="line-height: 0;height: 0;overflow: visible;pointer-events: none;"><section powered-by="yutustudio666" style="line-height: 0;"><section powered-by="yutustudio666" style="line-height: 0;overflow: hidden;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFHI0KskxATuxrWsPaf65UIrZ0dF2ibYGmXLaeCo4CFicwib5BCUB7x19Tg/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;overflow: hidden;" viewBox="0 0 345 278.69"><g opacity="0"><g pointer-events="visible"><foreignObject x="0" y="100" width="345" height="260"><section style="opacity:0;transform:scale(80)translate(-135px,-14px);overflow: hidden;"><section><section><mpvoice class="js_editor_audio audio_iframe js_uneditable" src="/cgi-bin/readtemplate?t=tmpl/audio_tmpl&name=%E5%85%B8%E5%85%B8%E5%AD%90%E5%BF%83%E5%A3%B0.wav&play_length=00:23" isaac2="1" low_size="46.33" source_size="46.3" high_size="185.72" name="典典子心声.wav" play_length="23000" voice_encode_fileid="MzI0Mjg5MDEwM18yMjQ3NDkyNzc5" data-topic_id="" data-topic_name="" data-pluginname="insertaudio" style="margin-top: 50px;"></mpvoice><span class="js_audio_frame db pages_reset audio_area "> <!-- 无话题的时候点击倍数等播放区域外的卡片区域：audio_card加.appmsg_card_custom_active --> <!-- 有话题的时候点击非话题区域，且倍数等播放区域外的卡片区域：audio_card加.appmsg_card_custom_active --> <span tabindex="0" id="voice_main_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="appmsg_card_context db audio_card" wah-hotarea="click"> <span id="audio_card_bd_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_bd"> <strong id="voice_title_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_title" role="link" aria-labelledby="js_a11y_audio_title_tips_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0 voice_title_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0">典典子心声.wav</strong> <span class="weui-hidden_abs" id="js_a11y_audio_title_tips_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" aria-hidden="true">音频：</span> <span class="weui-flex weui-flex_align-center"> <span class="weui-flex__item"> <span class="audio_card_opr"> <span id="voice_seekRange_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_progress_wrp" wah-hotarea="touchend"> <span class="audio_card_progress"> <span id="voice_progress_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" style="width:0%" class="audio_card_progress_inner"></span> <span id="voice_buffer_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_progress_buffer" style="width:0%;"></span> <span id="voice_loading_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_progress_loading" style="display:none;"></span> </span> <span tabindex="0" role="option" title="按住可调" id="voice_playdot_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_progress_handle weui-wa-hotarea" style="display:none;left:0%;"> <span class="weui-hidden_abs"> <span id="voice_percent_desc_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0">进度条</span> <span id="voice_percent_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0"></span> </span> </span> </span> <span role="option" class="audio_card_tips"> <em id="voice_playtime_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_length_current">00:00</em> <span class="weui-hidden_abs">/</span> <em id="voice_duration_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_length_total">00:23</em> </span> </span> </span> <span tabindex="0" role="button" aria-label="播放" id="voice_play_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="audio_card_switch" wah-hotarea="click"><em id="audio_play_btn" class="weui-wa-hotarea weui-audio-btn"></em></span> </span> <span id="audio_card_control_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="weui-flex weui-flex_align-center audio_card_playtool" style="display: none;"> <button type="button" id="audio_fast_back_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="reset_btn audio_card_playbtn" wah-hotarea="click"><span class="weui-hidden_abs">后退15秒</span></button> <button type="button" id="audio_double_speed_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="weui-btn weui-btn_mini audio_card_playbtn_multiple weui-wa-hotarea" wah-hotarea="click">倍速</button> <button type="button" id="audio_fast_forward_MzI0Mjg5MDEwM18yMjQ3NDkyNzc5_0" class="reset_btn audio_card_playbtn" wah-hotarea="click"><span class="weui-hidden_abs">快进15秒</span></button> </span> </span> </span> </span></section></section></section></foreignObject></g></g></svg></section><section powered-by="yutustudio666" style="height: 0;transform: rotate(180deg);line-height: 0;overflow: visible;pointer-events: none;"><section style="line-height: 0;transform: rotate(180deg);pointer-events: none;"><svg powered-by="yutustudio666" style="display: inline-block;overflow: visible;" viewBox="0 0 1280 1034" pointer-events="none"><g pointer-events="auto"><g opacity="0"><path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M-25.54-29.12v1081.76h1332.29V-29.12H-25.54z M1173.29,947.27H640 V804.44h533.29V947.27z"></path></g></g></svg></section></section><section powered-by="yutustudio666" style="line-height: 0;margin-top: -1px;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsfqwBcbRZiaRRBV62KpUT7B4McosJIOJVdwBzuZK15cWfYjSPX5ttfg1aPyYic4VXzNTk7mhmulf2Qw/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;" viewBox="0 0 1280 915"></svg></section><section powered-by="yutustudio666" style="line-height: 0;margin-top: -1px;transform: scale(1);isolation: isolate;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsfqwBcbRZiaRRBV62KpUT7B4z8BFTvcfKKsvgdjKJZdxVo8red5RGzlPqAThguZsIicNicyWZLmVPHYA/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;transform: scale(1);isolation: isolate;" viewBox="0 0 1280 552"></svg></section><section powered-by="yutustudio666" style="line-height: 0;margin-top: -1px;overflow: hidden;transform: scale(1);isolation: isolate;"><section powered-by="yutustudio666" style="line-height: 0;pointer-events: none;transform: scale(1);isolation: isolate;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsfqwBcbRZiaRRBV62KpUT7B4TZSzw7fibYukf3pFzAYL9Y5TTPlEkrB8WI9iayTPBYHSOkvib30rSmCBw/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;transform: scale(1);isolation: isolate;" viewBox="0 0 1280 1590"></svg></section></section><section powered-by="yutustudio666" style="line-height: 0;margin-top: -1px;transform: scale(1);isolation: isolate;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFh5OuGYWPMMFe6hnOxR7NC5el2N4n3KqJzjTFibfbQkICHzF5W5oQO2g/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;transform: scale(1);isolation: isolate;" viewBox="0 0 1280 1822"><g pointer-events="auto"><a class="weapp_image_link weapp_text_link" data-miniprogram-appid="wxf32616183fb4511e" data-miniprogram-path="pages/index/index" data-miniprogram-nickname="金典SATINE" href="" data-miniprogram-type="image" data-miniprogram-servicetype=""> <rect x="0" y="1100" width="1280" height="460" opacity="0"></rect></a> </g><g pointer-events="auto"><a href="https://weibo.com/u/2303673483" data-linktype="2"> <rect x="0" y="1610" width="640" height="200" opacity="0"></rect></a> </g><g pointer-events="auto"><a target="_blank" href="https://v.kuaishou.com/aNzsMw" tab="outerlink" data-linktype="2"> <rect x="640" y="1610" width="640" height="200" opacity="0"></rect></a> </g></svg></section><section powered-by="yutustudio666" style="line-height: 0;margin-top: -1px;overflow: hidden;"><section style="line-height: 0;height: 0;overflow: visible;pointer-events: auto;"><section style="line-height: 0;"><img data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFweibmX2NHHWEeMbX1TPaPmugoKHpUMlJwRq6nicUE3OK2McQjnyUPbiaw/640?wx_fmt=jpeg" data-type="jpeg" width="100%" data-ratio="0.6731481481481482" data-w="1080" _width="100%" class="img_loading" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" style="width: 380px !important; height: 256.45px !important;" crossorigin="anonymous" alt="图片"> </section></section><section style="line-height: 0;transform: scale(1);pointer-events: none;isolation: isolate;"><svg style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFweibmX2NHHWEeMbX1TPaPmugoKHpUMlJwRq6nicUE3OK2McQjnyUPbiaw/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: 100% 100%;" viewBox="0 0 1280 862"><g pointer-events="auto"><a href="https://www.xiaohongshu.com/user/profile/5f03e0ae0000000001001bde?xhsshare=CopyLink&appuid=594941426a6a6918d1238b7d&apptime=1621421315" data-linktype="2"> <rect x="0" y="0" width="640" height="220" opacity="0"></rect></a> </g><g pointer-events="auto"><a href="https://v.douyin.com/efctQ46/" data-linktype="2"> <rect x="640" y="0" width="640" height="220" opacity="0"></rect></a> </g><g pointer-events="auto"><a href="https://b23.tv/r7VRHu" data-linktype="2"> <rect x="640" y="220" width="640" height="250" opacity="0"></rect></a> </g></svg></section></section></section></section><section powered-by="yutustudio666" style="line-height: 0;pointer-events: none;transform: scale(1);isolation: isolate;"><svg powered-by="yutustudio666" style="display: inline-block;max-width: none !important;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFxugicvibHccJcGXyfMFviaViaVKmicso7vzNXcGXmmvhpn1CV8ib92DjicUiaQ/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;background-color: #ffffff;" viewBox="0 0 1280 1842"><animate attributeName="width" values="100%;368%;368%" keyTimes="0;.001;1" dur="4000s" begin="click+.7" fill="freeze" restart="never" calcMode="spline" keySplines=".3 0 .7 1;0 0 1 1"></animate><animate attributeName="opacity" values="1;0;0" keyTimes="0;.001;1" dur="600s" begin="click" fill="freeze" restart="never"></animate><g><circle cx="880" cy="730" r="40" fill="none" stroke="#ffffff" stroke-width="3"></circle><circle cx="880" cy="730" r="15" fill="#ffffff"><animate attributeName="r" values="15;30;15" dur="1s" repeatCount="indefinite"></animate></circle></g><g pointer-events="visible"><animateTransform attributeName="transform" type="translate" values="0 0;5000 0;5000 0" keyTimes="0;.000001;1" dur="300s" begin="click" fill="freeze" restart="never"></animateTransform><set attributeName="visibility" from="visible" to="hidden" dur="1ms" begin="click" fill="freeze" restart="never"></set><rect x="0" y="0" width="1280" height="1842" opacity="0"></rect></g></svg></section></section><section powered-by="yutustudio666" style="height: 0;transform: rotate(180deg)scale(1);line-height: 0;overflow: visible;pointer-events: none;isolation: isolate;"><section style="line-height: 0;transform: rotate(180deg);pointer-events: none;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTF0KInQkAowr8ZRDYGm9nyohESuBOrmoAec1cljLogoMIevU8FVibESMg/640?wx_fmt=jpeg");background-repeat: no-repeat;background-size: cover;background-color: #ffffff;" viewBox="0 0 1280 1842"><animate attributeName="opacity" values="1;0;0" keyTimes="0;.001;1" dur="600s" begin="click" fill="freeze" restart="never"></animate><g><circle cx="635" cy="1390" r="40" fill="none" stroke="#ffffff" stroke-width="3"></circle><circle cx="635" cy="1390" r="15" fill="#ffffff"><animate attributeName="r" values="15;30;15" dur="1s" repeatCount="indefinite"></animate></circle></g><g pointer-events="visible"><animateTransform attributeName="transform" type="translate" values="0 0;5000 0;5000 0" keyTimes="0;.000001;1" dur="300s" begin="click" fill="freeze" restart="never"></animateTransform><set attributeName="visibility" from="visible" to="hidden" dur="1ms" begin="click" fill="freeze" restart="never"></set><rect x="0" y="0" width="1280" height="1842" opacity="0"></rect></g></svg></section></section><section powered-by="yutustudio666" style="height: 0;transform: rotate(180deg)scale(1);line-height: 0;overflow: visible;pointer-events: none;isolation: isolate;"><section style="line-height: 0;transform: rotate(180deg);pointer-events: none;"><svg powered-by="yutustudio666" style="display: inline-block;background-image: url("https://mmbiz.qpic.cn/sz_mmbiz_jpg/XwPHOVW1tsefhpLOT0peWQTlITdGGnTFST78hZndnH3eTibwWx0002KakDiaSObftG1ybOvkbpibyPWE7WTib8xdDQ/640?wx_fmt=jpeg");background-repeat: no-repeat;opacity: 0;background-size: cover;background-color: #ffffff;" viewBox="0 0 1280 1842"><animate attributeName="opacity" values="1;0;0" keyTimes="0;.001;1" dur="600s" begin="click" fill="freeze" restart="never"></animate></svg></section></section><section style="height: 0px;opacity: 0;">.</section> </div>
就是标签一个个隐藏下去就是了 反正第一个透明度0 下面也会穿透
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。)
作者：newmiracle
出处：https://www.cnblogs.com/newmiracle/
