svg+css实现圆圈转动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现圆圈转动动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
html, body {
  background-color: #1f1f1f;
}

.defs {
  display: none;
}

.centered {
  position: fixed;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}

.circles {
  position: relative;
  width: 300px;
  height: 300px;
}
.circles svg {
  position: absolute;
  opacity: 0.8;
  stroke-dasharray: 150;
  stroke-dashoffset: 1000;
}
.circles svg:nth-child(10) {
  width: 300px;
  height: 300px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  stroke: #fff;
}
.circles svg:nth-child(9) {
  width: 280px;
  height: 280px;
  left: 50%;
  margin-left: -140px;
  top: 50%;
  margin-top: -140px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  stroke: #e6e6e6;
}
.circles svg:nth-child(8) {
  width: 260px;
  height: 260px;
  left: 50%;
  margin-left: -130px;
  top: 50%;
  margin-top: -130px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  stroke: #cccccc;
}
.circles svg:nth-child(7) {
  width: 240px;
  height: 240px;
  left: 50%;
  margin-left: -120px;
  top: 50%;
  margin-top: -120px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  stroke: #b3b3b3;
}
.circles svg:nth-child(6) {
  width: 220px;
  height: 220px;
  left: 50%;
  margin-left: -110px;
  top: 50%;
  margin-top: -110px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  stroke: #999999;
}
.circles svg:nth-child(5) {
  width: 200px;
  height: 200px;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  stroke: gray;
}
.circles svg:nth-child(4) {
  width: 180px;
  height: 180px;
  left: 50%;
  margin-left: -90px;
  top: 50%;
  margin-top: -90px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  stroke: #666666;
}
.circles svg:nth-child(3) {
  width: 160px;
  height: 160px;
  left: 50%;
  margin-left: -80px;
  top: 50%;
  margin-top: -80px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  stroke: #4d4d4d;
}
.circles svg:nth-child(2) {
  width: 140px;
  height: 140px;
  left: 50%;
  margin-left: -70px;
  top: 50%;
  margin-top: -70px;
  -webkit-animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
          animation: glitch 20s cubic-bezier(0.71, 0.03, 0.74, 1) infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  stroke: #333333;
}
.circles svg:nth-child(1) {
  width: 120px;
  height: 120px;
 .........完整代码请登录后点击上方下载按钮下载查看