原生js+svg实现彩色圆点旋转动画效果代码-html代码-BFW代码库

原生js+svg实现彩色圆点旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：原生js+svg实现彩色圆点旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
<style>
body {
  background-color: #000;
  display: grid;
  place-items: center;
  height: 100vh;
}
svg {
  background-color: #121212;
  border-radius: 50%;
  border: 10px solid #ff0080;
}
svg .cir0 {
  transform-origin: center;
  animation: rotate 5s 0s ease-in-out infinite alternate;
}
svg .cir0 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir1 {
  transform-origin: center;
  animation: rotate 5s 0.5s ease-in-out infinite alternate;
}
svg .cir1 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir2 {
  transform-origin: center;
  animation: rotate 5s 1s ease-in-out infinite alternate;
}
svg .cir2 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir3 {
  transform-origin: center;
  animation: rotate 5s 1.5s ease-in-out infinite alternate;
}
svg .cir3 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir4 {
  transform-origin: center;
  animation: rotate 5s 2s ease-in-out infinite alternate;
}
svg .cir4 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir5 {
  transform-origin: center;
  animation: rotate 5s 2.5s ease-in-out infinite alternate;
}
svg .cir5 circle {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
svg .cir6 {
  transform-origin: center;
  animation: rotate 5s 3s ease-in-out infinite alternate;
}
svg .cir6 circle {
  filter: drop-shadow(0 0 2px rgba(0.........完整代码请登录后点击上方下载按钮下载查看