div+css实现圆圈隧道动画效果代码-html代码-BFW代码库

div+css实现圆圈隧道动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现圆圈隧道动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  background: black;
  overflow: hidden;
}

div {
  border-radius: 100%;
  border: 3px dashed white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-animation: ease-in-out infinite tunnel 5s;
          animation: ease-in-out infinite tunnel 5s;
}
div:nth-child(1) {
  width: 2rem;
  height: 2rem;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
div:nth-child(2) {
  width: 4rem;
  height: 4rem;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
div:nth-child(3) {
  width: 6rem;
  height: 6rem;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
div:nth-child(4) {
  width: 8rem;
  height: 8rem;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
div:nth-child(5) {
  width: 10rem;
  height: 10rem;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
div:nth-child(6) {
  width: 12rem;
  height: 12rem;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
div:nth-child(7) {
  width: 14rem;
  height: 14rem;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
div:nth-child(8) {
  width: 16rem;
  height: 16rem;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
div:nth-child(9) {
  width: 18rem;
  height: 18rem;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
div:nth-child(10) {
  width: 20rem;
  height: 20rem;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
div:nth-child(11) {
  width: 22rem;
  height: 22rem;
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
div:nth-child(12) {
  width: 24rem;
  height: 24rem;
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
div:nth-child(13) {
  width: 26rem;
  height: 26rem;
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
div:nth-child(14) {
  width: 28rem;
  height: 28rem;
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
div:nth-child(15) {
  width: 30rem;
  height: 30rem;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
div:nth-child(16) {
  width: 32rem;
  height: 32rem;
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
div:nth-child(17) {
  width: 34rem;
  height: 34rem;
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}
div:nth-child(18) {
  width: 36rem;
  height: 36rem;
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}
div:nth-child(19) {
  width: 38rem;
  height: 38rem;
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}
div:nth-child(20) {
  width: 40rem;
  height: 40rem;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
div:nth-child(21) {
  width: 42rem;
  height: 42rem;
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}
div:nth-child(22) {
  width: 44rem;
  height: 44rem;
  -webkit-animation-delay: 4.4s;
          animation-delay: 4.4s;
}
div:nth-child(23) {
  width: 46rem;
  height: 46rem;
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}
div:nth-child(24) {
  width: 48rem;
  height: 48rem;
  -webkit-animation-delay: 4.8s;
          animation-delay: 4.8s;
}
div:nth-child(25) {
  width: 50rem;
  height: 50rem;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
div:nth-child(26) {
  width: 52rem;
  height: 52rem;
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s;
}
div:nth-child(27) {
  width: 54rem;
  height: 54rem;
  -webkit-animation-delay: 5.4s;
          animation-delay: 5.4s;
}
div:nth-child(28) {
  width: 56rem;
  height: 56rem;
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}
div:nth-child(29) {
  width: 58rem;
  height: 58rem;
  -webkit-animation-delay: 5.8s;
          animation-delay: 5.8s;
}
div:nth-child(30) {
  width: 60rem;
  height: 60rem;
 .........完整代码请登录后点击上方下载按钮下载查看