css+div实现光芒四射旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+div实现光芒四射旋转动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
      background: #171c1a;
      margin: 400px;
      overflow: hidden;
    }
    
    body div {
      -webkit-animation: anim 3s infinite;
              animation: anim 3s infinite;
      border-radius: 50%;
      opacity: 0;
      position: absolute;
      width: 12px;
      height: 12px;
    }
    
    div:nth-child(1) {
      -webkit-animation-delay: 0.05s;
              animation-delay: 0.05s;
      background: radial-gradient(white, #f5503d);
      box-shadow: 0 0 10px #f5503d;
      transform: perspective(10px) rotate(6deg) translate3d(60%, 60%, 0) rotateY(60deg);
    }
    
    div:nth-child(2) {
      -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
      background: radial-gradient(white, #f5623d);
      box-shadow: 0 0 10px #f5623d;
      transform: perspective(10px) rotate(12deg) translate3d(120%, 120%, 0) rotateY(120deg);
    }
    
    div:nth-child(3) {
      -webkit-animation-delay: 0.15s;
              animation-delay: 0.15s;
      background: radial-gradient(white, #f5743d);
      box-shadow: 0 0 10px #f5743d;
      transform: perspective(10px) rotate(18deg) translate3d(180%, 180%, 0) rotateY(180deg);
    }
    
    div:nth-child(4) {
      -webkit-animation-delay: 0.2s;
              animation-delay: 0.2s;
      background: radial-gradient(white, #f5873d);
      box-shadow: 0 0 10px #f5873d;
      transform: perspective(10px) rotate(24deg) translate3d(240%, 240%, 0) rotateY(240deg);
    }
    
    div:nth-child(5) {
      -webkit-animation-delay: 0.25s;
              animation-delay: 0.25s;
      background: radial-gradient(white, #f5993d);
      box-shadow: 0 0 10px #f5993d;
      transform: perspective(10px) rotate(30deg) translate3d(300%, 300%, 0) rotateY(300deg);
    }
    
    div:nth-child(6) {
      -webkit-animation-delay: 0.3s;
              animation-delay: 0.3s;
      background: radial-gradient(white, #f5ab3d);
      box-shadow: 0 0 10px #f5ab3d;
      transform: perspective(10px) rotate(36deg) translate3d(360%, 360%, 0) rotateY(360deg);
    }
    
    div:nth-child(7) {
      -webkit-animation-delay: 0.35s;
              animation-delay: 0.35s;
      background: radial-gradient(white, #f5be3d);
      box-shadow: 0 0 10px #f5be3d;
      transform: perspective(10px) rotate(42deg) translate3d(420%, 420%, 0) rotateY(420deg);
    }
    
    div:nth-child(8) {
      -webkit-animation-delay: 0.4s;
              animation-delay: 0.4s;
      background: radial-gradient(white, #f5d03d);
      box-shadow: 0 0 10px #f5d03d;
      transform: perspective(10px) rotate(48deg) translate3d(480%, 480%, 0) rotateY(480deg);
    }
    
    div:nth-child(9) {
      -webkit-animation-delay: 0.45s;
              animation-delay: 0.45s;
      background: radial-gradient(white, #f5e23d);
      box-shadow: 0 0 10px #f5e23d;
      transform: perspective(10px) rotate(54deg) translate3d(540%, 540%, 0) rotateY(540deg);
    }
    
    div:nth-child(10) {
      -webkit-animation-delay: 0.5s;
              animation-delay: 0.5s;
      background: radial-gradient(white, #f5f53d);
      box-shadow: 0 0 10px #f5f53d;
      transform: perspective(10px) rotate(60deg) translate3d(600%, 600%, 0) rotateY(600deg);
    }
    
    div:nth-child(11) {
      -webkit-animation-delay: 0.55s;
              animation-delay: 0.55s;
      background: radial-gradient(white, #e2f53d);
      box-shadow: 0 0 10px #e2f53d;
      transform: perspective(10px) rotate(66deg) translate3d(660%, 660%, 0) rotateY(660deg);
    }
    
    div:nth-child(12) {
      -webkit-animation-delay: 0.6s;
              animation-delay: 0.6s;
      background: radial-gradient(white, #d0f53d);
      box-shadow: 0 0 10px #d0f53d;
      transform: perspective(10px) rotate(72deg) translate3d(720%, 720%, 0) rotateY(720deg);
    }
    
    div:nth-child(13) {
      -webkit-animation-delay: 0.65s;
              animation-delay: 0.65s;
      background: radial-gradient(white, #bef53d);
      box-shadow: 0 0 10px #bef53d;
      transform: perspective(10px) rotate(78deg) translate3d(780%, 780%, 0) rotateY(780deg);
    }
    
    div:nth-child(14) {
      -webkit-animation-delay: 0.7s;
              animation-delay: 0.7s;
      background: radial-gradient(white, #abf53d);
      box-shadow: 0 0 10px #abf53d;
      transform: perspective(10px) rotate(84deg) translate3d(840%, 840%, 0) rotateY(840deg);
    }
    
    div:nth-child(15) {
      -webkit-animation-delay: 0.75s;
              animation-delay: 0.75s;
      background: radial-gradient(white, #99f53d);
      box-shadow: 0 0 10px #99f53d;
      transform: perspective(10px) rotate(90deg) translate3d(900%, 900%, 0) rotateY(900deg);
    }
    
    div:nth-child(16) {
      -webkit-animation-delay: 0.8s;
              animation-delay: 0.8s;
      background: radial-gradient(white, #87f53d);
      box-shadow: 0 0 10px #87f53d;
      transform: perspective(10px) rotate(96deg) translate3d(960%, 960%, 0) rotateY(960deg);
    }
    
    div:nth-child(17) {
      -webkit-animation-delay: 0.85s;
              animation-delay: 0.85s;
      background: radial-gradient(white, #74f53d);
      box-shadow: 0 0 10px #74f53d;
      transform: perspective(10px) rotate(102deg) translate3d(1020%, 1020%, 0) rotateY(1020deg);
    }
    
    div:nth-child(18) {
      -webkit-animation-delay: 0.9s;
              animation-delay: 0.9s;
      background: radial-gradient(white, #62f53d);
      box-shadow: 0 0 10px #62f53d;
      transform: perspective(10px) rotate(108deg) translate3d(1080%, 1080%, 0) rotateY(1080deg);
    }
    
    div:nth-child(19) {
      -webkit-animation-delay: 0.95s;
              animation-delay: 0.95s;
      background: radial-gradient(white, #50f53d);
      box-shadow: 0 0 10px #50f53d;
      transform: perspective(10px) rotate(114deg) translate3d(1140%, 1140%, 0) rotateY(1140deg);
    }
    
    div:nth-child(20) {
      -webkit-animation-delay: 1s;
              animation-delay: 1s;
      background: radial-gradient(white, #3df53d);
      box-shadow: 0 0 10px #3df53d;
      transform: perspective(10px) rotate(120deg) translate3d(1200%, 1200%, 0) rotateY(1200deg);
    }
    
    div:nth-child(21) {
      -webkit-animation-delay: 1.05s;
              animation-delay: 1.05s;
      background: radial-gradient(white, #3df550);
      box-shadow: 0 0 10px #3df550;
      transform: perspective(10px) rotate(126deg) translate3d(1260%, 1260%, 0) rotateY(1260deg);
    }
    
    div:nth-child(22) {
      -webkit-animation-delay: 1.1s;
              animation-delay: .........完整代码请登录后点击上方下载按钮下载查看