下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML><head><Meta content="text/HTML; charset=utf-8" http-equiv="Content-Type" /> <style> .water { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear 1; } .no-water { stroke-dasharray: 1000; stroke-dashoffset: 1000; } .first-run { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear 1; } .runing { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: run 10s linear infinite; } .runwater { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: run 10s linear infinite; } @keyframes dash { to { stroke-dashoffset: 0; } } @keyframes run { from { stroke-dasharray: 10,5; } to { stroke-dasharray: 40,5; } } </style></head><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" wIDth="800" > <polyline points="10,10 10,200 200,400 400,600" /> <polyline ID="water" points="10,200" /> <polyline ID="water2" points="200,600" /> <rect ID="key" wIDth="20" height="20" x=190 y=190 /> <text x=220 y=190 Font-size="20" Font-family="YouYuan" x="100" y="100" wIDth="200" height="30">点击阀门 </text> </svg> <script type="text/JavaScript"> var keybtn=document.querySelector('#key'); var water1 = document.querySelector('#water'); var water2 = document.querySelector('#water2'); water2.addEventListener("webkitAnimationEnd",function(evt){ //动画结束时事件 this.classname.baseVal="runing"; water1.classname.baseVal="runing";},false); water1.addEventListener("webkitAnimationEnd",function(evt){ //动画结束时事件 this.style.strokeDashoffset=0;},false); keybtn.addEventListener("click",function(){ water2.classname.baseVal="first-run";},false); </script></body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的svg+css3 模拟管道水流效果,限chrome全部内容，希望文章能够帮你解决svg+css3 模拟管道水流效果,限chrome所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）