DrawSVGPlugin实现下载按钮点击显示进度动画效果代码
代码语言:html
所属分类:动画
代码描述:DrawSVGPlugin实现下载按钮点击显示进度动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body{ background-color:#002529; overflow:hidden; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; text-align:center; } .arrow-middle-null, .arrow-left-null, .arrow-right-null { position:absolute; } svg{ width:50%; height:50%; cursor:pointer; } .outline{ opacity:0; } .outline-bg{ opacity:0.02; } </style> </head> <body> <svg class="loader-svg" version="1.1" viewBox="0 0 180 180" > <defs> <filter id="glow" y="-50%" height="180%"> <feGaussianBlur stdDeviation="2 2" result="coloredBlur"/> <feMerge> <feMergeNode in="coloredBlur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> </defs> <g class="all-lines"> <path class="outline" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M90.5,161C51.6,161,20,129.4,20,90.5S51.6,20,90.5,20S161,51.6,161,90.5S129.4,161,90.5,161"/> <path class="outline-bg" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M90.5,161C51.6,161,20,129.4,20,90.5S51.6,20,90.5,20S161,51.6,161,90.5S129.4,161,90.5,161"/> <polyline class="arrow-head" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points=" 122.5,103 90,135.5 57.5,103 "/> <line class="arrow-line" fill="none" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="90" y1="52" x2="90" y2="135"/> </g> </svg> <div class="arrow-left-null"></div> <div class="arrow-middle-null"></div> <div class="arrow-right-null"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/DrawSVGPlugin.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Draggable.js"></script> <script> var loaderSVG = document.querySelector('.loader-svg'); var container = document.querySelector('.container'); var arrowMiddleNull = document.querySelector('.arrow-middle-null'); var arrowRightNull = document.querySelector('.arrow-right-null'); var arrowLeftNull = document.querySelector('.arrow-left-null'); var arrowHead = document.querySelector('.arrow-head');.........完整代码请登录后点击上方下载按钮下载查看
网友评论0