css实现光环闪耀动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现光环闪耀动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  overflow: hidden;
  background: #111;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  perspective: 200px;
}

i {
  display: block;
  position: absolute;
  opacity: 1;
}
i b {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: white;
  box-shadow: 0px 0px 14px white;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

i:nth-child(1) {
  transform: rotate(3.6deg) translate3d(100px, 0, 0);
}
i:nth-child(1) b {
  animation-delay: 0.03061s;
}

i:nth-child(2) {
  transform: rotate(7.2deg) translate3d(100px, 0, 0);
}
i:nth-child(2) b {
  animation-delay: 0.06122s;
}

i:nth-child(3) {
  transform: rotate(10.8deg) translate3d(100px, 0, 0);
}
i:nth-child(3) b {
  animation-delay: 0.09184s;
}

i:nth-child(4) {
  transform: rotate(14.4deg) translate3d(100px, 0, 0);
}
i:nth-child(4) b {
  animation-delay: 0.12245s;
}

i:nth-child(5) {
  transform: rotate(18deg) translate3d(100px, 0, 0);
}
i:nth-child(5) b {
  animation-delay: 0.15306s;
}

i:nth-child(6) {
  transform: rotate(21.6deg) translate3d(100px, 0, 0);
}
i:nth-child(6) b {
  animation-delay: 0.18367s;
}

i:nth-child(7) {
  transform: rotate(25.2deg) translate3d(100px, 0, 0);
}
i:nth-child(7) b {
  animation-delay: 0.21429s;
}

i:nth-child(8) {
  transform: rotate(28.8deg) translate3d(100px, 0, 0);
}
i:nth-child(8) b {
  animation-delay: 0.2449s;
}

i:nth-child(9) {
  transform: rotate(32.4deg) translate3d(100px, 0, 0);
}
i:nth-child(9) b {
  animation-delay: 0.27551s;
}

i:nth-child(10) {
  transform: rotate(36deg) translate3d(100px, 0, 0);
}
i:nth-child(10) b {
  animation-delay: 0.30612s;
}

i:nth-child(11) {
  transform: rotate(39.6deg) translate3d(100px, 0, 0);
}
i:nth-child(11) b {
  animation-delay: 0.33673s;
}

i:nth-child(12) {
  transform: rotate(43.2deg) translate3d(100px, 0, 0);
}
i:nth-child(12) b {
  animation-delay: 0.36735s;
}

i:nth-child(13) {
  transform: rotate(46.8deg) translate3d(100px, 0, 0);
}
i:nth-child(13) b {
  animation-delay: 0.39796s;
}

i:nth-child(14) {
  transform: rotate(50.4deg) translate3d(100px, 0, 0);
}
i:nth-child(14) b {
  animation-delay: 0.42857s;
}

i:nth-child(15) {
  transform: rotate(54deg) translate3d(100px, 0, 0);
}
i:nth-child(15) b {
  animation-delay: 0.45918s;
}

i:nth-child(16) {
  transform: rotate(57.6deg) translate3d(100px, 0, 0);
}
i:nth-child(16) b {
  animation-delay: 0.4898s;
}

i:nth-child(17) {
  transform: rotate(61.2deg) translate3d(100px, 0, 0);
}
i:nth-child(17) b {
  animation-delay: 0.52041s;
}

i:nth-child(18) {
  transform: rotate(64.8deg) translate3d(100px, 0, 0);
}
i:nth-child(18) b {
  animation-delay: 0.55102s;
}

i:nth-child(19) {
  transform: rotate(68.4deg) translate3d(100px, 0, 0);
}
i:nth-child(19) b {
  animation-delay: 0.58163s;
}

i:nth-child(20) {
  transform: rotate(72deg) translate3d(100px, 0, 0);
}
i:nth-child(20) b {
  animation-delay: 0.61224s;
}

i:nth-child(21) {
  transform: rotate(75.6deg) translate3d(100px, 0, 0);
}
i:nth-child(21) b {
  animation-delay: 0.64286s;
}

i:nth-child(22) {
  transform: rotate(79.2deg) translate3d(100px, 0, 0);
}
i:nth-child(22) b {
  animation-delay: 0.67347s;
}

i:nth-child(23) {
  transform: rotate(82.8deg) translate3d(100px, 0, 0);
}
i:nth-child(23) b {
  animation-delay: 0.70408s;
}

i:nth-child(24) {
  transform: rotate(86.4deg) translate3d(100px, 0, 0);
}
i:nth-child(24) b {
  animation-delay: 0.73469s;
}

i:nth-child(25) {
  transform: rotate(90deg) translate3d(100px, 0, 0);
}
i:nth-child(25) b {
  animation-delay: 0.76531s;
}

i:nth-child(26) {
  transform: rotate(93.6deg) translate3d(100px, 0, 0);
}
i:nth-child(26) b {
  animation-delay: 0.79592s;
}

i:nth-child(27) {
  transform: rotate(97.2deg) translate3d(100px, 0, 0);
}
i:nth-child(27) b {
  animation-delay: 0.82653s;
}

i:nth-child(28) {
  transform: rotate(100.8deg) translate3d(100px, 0, 0);
}
i:nth-child(28) b {
  animation-delay: 0.85714s;
}

i:nth-child(29) {
  transform: rotate(104.4deg) translate3d(100px, 0, 0);
}
i:nth-child(29) b {
  animation-delay: 0.88776s;
}

i:nth-child(30) {
  transform: rotate(108deg) translate3d(100px, 0, 0);
}
i:nth-child(30) b {
  animation-delay: 0.91837s;
}

i:nth-child(31) {
  transform: rotate(111.6deg) translate3d(100px, 0, 0);
}
i:nth-child(31) b {
  animation-delay: 0.94898s;
}

i:nth-child(32) {
  transform: rotate(115.2deg) translate3d(100px, 0, 0);
}
i:nth-child(32) b {
  animation-delay: 0.97959s;
}

i:nth-child(33) {
  transform: rotate(118.8deg) translate3d(100px, 0, 0);
}
i:nth-child(33) b {
  animation-delay: 1.0102s;
}

i:nth-child(34) {
  transform: rotate(122.4deg) translate3d(100px, 0, 0);
}
i:nth-child(34) b {
  animation-delay: 1.04082s;
}

i:nth-child(35) {
  transform: rotate(126deg) translate3d(100px, 0, 0);
}
i:nth-child(35) b {
  animation-delay: 1.07143s;
}

i:nth-child(36) {
  transform: rotate(129.6deg) translate3d(100px, 0, 0);
}
i:nth-child(36) b {
  animation-delay: 1.10204s;
}

i:nth-child(37) {
  transform: rotate(133.2deg) translate3d(100px, 0, 0);
}
i:nth-child(37) b {
  animation-delay: 1.13265s;
}

i:nth-child(38) {
  transform: rotate(136.8deg) translate3d(100px, 0, 0);
}
i:nth-child(38) b {
  animation-delay: 1.16327s;
}

i:nth-child(39) {
  transform: rotate(140.4deg) translate3d(100px, 0, 0);
}
i:nth-child(39) b {
  animation-delay: 1.19388s;
}

i:nth-child(40) {
  transform: rotate(144deg) translate3d(100px, 0, 0);
}
i:nth-child(40) b {
  animation-delay: 1.22449s;
}

i:nth-child(41) {
  transform: rotate(147.6deg) translate3d(100px, 0, 0);
}
i:nth-child(41) b {
  animation-delay: 1.2551s;
}

i:nth-child(42) {
  transform: rotate(151.2deg) translate3d(100px, 0, 0);
}
i:nth-child(42) b {
  animation-delay: 1.28571s;
}

i:nth-child(43) {
  transform: rotate(154.8deg) translate3d(100px, 0, 0);
}
i:nth-child(43) b {
  animation-delay: 1.31633s;
}

i:nth-child(44) {
  transform: rotate(158.4deg) translate3d(100px, 0, 0);
}
i:nth-child(44) b {
  animation-delay: 1.34694s;
}

i:nth-child(45) {
  transform: rotate(162deg) translate3d(100px, 0, 0);
}
i:nth-child(45) b {
  animation-delay: 1.37755s;
}

i:nth-child(46) {
  transform: rotate(165.6deg) translate3d(100px, 0, 0);
}
i:nth-child(46) b {
  animation-delay: 1.40816s;
}

i:nth-child(47) {
  transform: rotate(169.2deg) translate3d(100px, 0, 0);
}
i:nth-child(47) b {
  animation-delay: 1.43878s;
}

i:nth-child(48) {
  transform: rotate(172.8deg) translate3d(100px, 0, 0);
}
i:nth-child(48) b {
  animation-delay: 1.46939s;
}

i:nth-child(49) {
  transform: rotate(176.4deg) translate3d(100px, 0, 0);
}
i:nth-child(49) b {
  animation-delay: 1.5s;
}

i:nth-child(50) {
  transform: rotate(180deg) translate3d(100px, 0, 0);
}
i:nth-child(50) b {
  animation-delay: 1.53061s;
}

i:nth-child(51) {
  transform: rotate(183.6deg) translate3d(100px, 0, 0);
}
i:nth-child(51) b {
  animation-delay: 1.56122s;
}

i:nth-child(52) {
  transform: rotate(187.2deg) translate3d(100px, 0, 0);
}
i:nth-child(52) b {
  animation-delay: 1.59184s;
}

i:nth-child(53) {
  transform: rotate(190.8deg) translate3d(100px, 0, 0);
}
i:nth-child(53) b {
  animation-delay: 1.62245s;
}

i:nth-child(54) {
  transform: rotate(194.4deg) translate3d(100px, 0, 0);
}
i:nth-child(54) b {
  animation-delay: 1.65306s;
}

i:nth-child(55) {
  transform: rotate(198deg) translate3d(100px, 0, 0);
}
i:nth-child(55) b {
  animation-delay: 1.68367s;
}

i:nth-child(56) {
  transform: rotate(201.6deg) translate3d(100px, 0, 0);
}
i:nth-child(56) b {
  animation-delay: 1.71429s;
}

i:nth-child(57) {
  transform: rotate(205.2deg) translate3d(100px, 0, 0);
}
i:nth-child(57) b {
  animation-delay: 1.7449s;
}

i:nth-child(58) {
  transform: rotate(208.8deg) translate3d(100px, 0, 0);
}
i:nth-child(58) b {
  animation-delay: 1.77551s;
}

i:nth-child(59) {
  transform: rotate(212.4deg) translate3d(100px, 0, 0);
}
i:nth-child(59) b {
  animation-delay: 1.80612s;
}

i:nth-child(60) {
  transform: rotate(216deg) translate3d(100px, 0, 0);
}
i:nth-child(60) b {
  animation-delay: 1.83673s;
}

i:nth-child(61) {
  transform: rotate(219.6deg) translate3d(100px, 0, 0);
}
i:nth-child(61) b {
  animation-delay: 1.86735s;
}

i:nth-child(62) {
  transform: rotate(223.2deg) translate3d(100px, 0, 0);
}
i:nth-child(62) b {
  animation-delay: 1.89796s;
}

i:nth-child(63) {
  transform: rotate(226.8deg) translate3d(100px, 0, 0);
}
i:nth-child(63) b {
  animation-delay: 1.92857s;
}

i:nth-child(64) {
  transform: rotate(230.4deg) translate3d(100px, 0, 0);
}
i:nth-child(64) b {
  animation-delay: 1.95918s;
}

i:nth-child(65) {
  transform: rotate(234deg) translate3d(100px, 0, 0);
}
i:nth-child(65) b {
  animation-delay: 1.9898s;
}

i:nth-child(66) {
  transform: rotate(237.6deg) translate3d(100px, 0, 0);
}
i:nth-child(66) b {
  animation-delay: 2.02041s;
}

i:nth-child(67) {
  transform: rotate(241.2deg) translate3d(100px, 0, 0);
}
i:nth-child(67) b {
  animation-delay: 2.05102s;
}

i:nth-child(68) {
  transform: rotate(244.8deg) translate3d(100px, 0, 0);
}
i:nth-child(68) b {
  animation-delay: 2.08163s;
}

i:nth-child(69) {
  transfor.........完整代码请登录后点击上方下载按钮下载查看