svg点击展开原理
svg点击展开原理
<section style="line-height: 0;overflow:hidden;"> <section style="height:0;"><svg style="background-image: url(https://oss.knowway.cn/zhongliangct/hou1.jpg);background-repeat: no-repeat;background-size: 100% 100%;" viewBox="0 0 750 2986"></svg> </section> <section > <svg style="background-image: url(https://oss.knowway.cn/zhongliangct/hou2.jpg);background-repeat: no-repeat;background-size: 100% 100%;opacity:0" viewBox="0 0 750 86"> <animate attributeName="width" values="100%;1223%;1223%" keyTimes="0;.001;1" dur="20000s" begin="click" fill="freeze" restart="never"></animate> </svg> </section> </section>
就是前面加了一层透明度为0 然后做动画就行了
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
作者:newmiracle
出处:https://www.cnblogs.com/newmiracle/