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;
.........完整代码请登录后点击上方下载按钮下载查看