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

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

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