圆环无限放大循环动画效果
代码语言:html
所属分类:动画
代码描述:圆环无限放大循环动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { position: relative; height: 100vh; width: 100vw; overflow: hidden; cursor: pointer; } .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; height: 0vw; width: 0vw; transition: top 1s, left 1.5s; animation: growmycirclegrow 10s infinite; } @keyframes growmycirclegrow { from { width: 0vw; height: 0vw; z-index: 100; } to { width: 250vw; height: 250vw; z-index: 0; } } </style> </head> <body translate="no" > <div class="circle" number="0"></div> <div class="circle" number="1"></div> <div class="circle" number="2"></div> <div class="circle" number="3"></div> <div class="circle" number="4"></div> <div class="circle" number="5"></div> <div class="circle" number="6"></div> <div class="circle" number="7"></div> <div class="circle" number="8"></div> <div class="circle" number="9"></div> <div class="circle" number="10"></div> <div class="circle" number="11"></div> <div class="circle" number="12"></div> <div class="circle" number="13"></div> <div class="circle" number="14"></div> <div class="circle" number="15"></div> <div class="circle" number="16"></div> <div class="circle" number="17"></div> <div class="circle" number="18"></div> <div class="circle" number="19"></div> <div class="circle" number="20"></div> <div class="circle" number="21"></div> <div class="circle" number="22"></div> <div class="circle" number="23"></div> <div class="circle" number="24"></div> <div class="circle" number="25"></div> <div class="circle" number="26"></div> <div class="circle" number="27"></div> <div class="circle" number="28"></div> <div class="circle" number="29"></div> <div class="circle" number="30"></div> <div class="circle" number="31"></div> <div class="circle" number="32"></div> <div class="circle" number="33"></div> <div class="circle" number="34"></div> <div class="circle" number="35"></div> <div class="circle" number="36"></div> <div class="circle" number="37"></div> <div class="circle" number="38"></div> <div class="circle" number="39"></div> <div class="circle" number="40"></div> <div class="circle" number="41"></div> <div class="circle" number="42"></div> <div class="circle" number="43"></div> <div class="circle" number="44"></div> <div class="circle" number="45"></div> <div class="circle" number="46"></div> <div class="circle" number="47"></div> <div class="circle" number="48"></div> <div class="circle" number="49"></div> <div class="circle" number="50"></div> <div class="circle" number="51"></div> <div class="circle" number=&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0