div+css实现光影射线流星动画效果代码-html代码-BFW代码库

div+css实现光影射线流星动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现光影射线流星动画效果代码

下面为部分代码预览，完整代码请点击下载或在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 4s infinite;
          animation: anim 4s infinite;
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  width: 12px;
  height: 12px;
}

div:nth-child(1) {
  -webkit-animation-delay: 0.07s;
          animation-delay: 0.07s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(6deg) translate3d(420%, 420%, 0) rotateY(60deg);
}

div:nth-child(2) {
  -webkit-animation-delay: 0.14s;
          animation-delay: 0.14s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(12deg) translate3d(60%, 60%, 0) rotateY(120deg);
}

div:nth-child(3) {
  -webkit-animation-delay: 0.21s;
          animation-delay: 0.21s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(18deg) translate3d(480%, 480%, 0) rotateY(180deg);
}

div:nth-child(4) {
  -webkit-animation-delay: 0.28s;
          animation-delay: 0.28s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(24deg) translate3d(120%, 120%, 0) rotateY(240deg);
}

div:nth-child(5) {
  -webkit-animation-delay: 0.35s;
          animation-delay: 0.35s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(30deg) translate3d(540%, 540%, 0) rotateY(300deg);
}

div:nth-child(6) {
  -webkit-animation-delay: 0.42s;
          animation-delay: 0.42s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(36deg) translate3d(180%, 180%, 0) rotateY(360deg);
}

div:nth-child(7) {
  -webkit-animation-delay: 0.49s;
          animation-delay: 0.49s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(42deg) translate3d(600%, 600%, 0) rotateY(420deg);
}

div:nth-child(8) {
  -webkit-animation-delay: 0.56s;
          animation-delay: 0.56s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(48deg) translate3d(240%, 240%, 0) rotateY(480deg);
}

div:nth-child(9) {
  -webkit-animation-delay: 0.63s;
          animation-delay: 0.63s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(54deg) translate3d(660%, 660%, 0) rotateY(540deg);
}

div:nth-child(10) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  background: radial-gradient(white, gold);
  box-shadow: 0 0 10px gold;
  transform: perspective(10px) rotate(60deg) translate3d(300%, 300%.........完整代码请登录后点击上方下载按钮下载查看