div+css背景光芒照耀转动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：背景
代码描述：div+css背景光芒照耀转动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

<style>
html {
  height: 100%;
  background: #ffee00;
  overflow: hidden;
}

body {
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.line {
  position: absolute;
  top: 50%;
  left: -50%;
}

.lines0 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin0 10s linear infinite;
          animation: spin0 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(0deg);
          transform: rotateX(10deg) rotateZ(0deg);
}

.lines1 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin1 10s linear infinite;
          animation: spin1 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(3.6deg);
          transform: rotateX(10deg) rotateZ(3.6deg);
}

.lines2 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin2 10s linear infinite;
          animation: spin2 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(7.2deg);
          transform: rotateX(10deg) rotateZ(7.2deg);
}

.lines3 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin3 10s linear infinite;
          animation: spin3 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(10.8deg);
          transform: rotateX(10deg) rotateZ(10.8deg);
}

.lines4 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin4 10s linear infinite;
          animation: spin4 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(14.4deg);
          transform: rotateX(10deg) rotateZ(14.4deg);
}

.lines5 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin5 10s linear infinite;
          animation: spin5 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(18deg);
          transform: rotateX(10deg) rotateZ(18deg);
}

.lines6 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin6 10s linear infinite;
          animation: spin6 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(21.6deg);
          transform: rotateX(10deg) rotateZ(21.6deg);
}

.lines7 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin7 10s linear infinite;
          animation: spin7 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(25.2deg);
          transform: rotateX(10deg) rotateZ(25.2deg);
}

.lines8 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin8 10s linear infinite;
          animation: spin8 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(28.8deg);
          transform: rotateX(10deg) rotateZ(28.8deg);
}

.lines9 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin9 10s linear infinite;
          animation: spin9 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(32.4deg);
          transform: rotateX(10deg) rotateZ(32.4deg);
}

.lines10 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin10 10s linear infinite;
          animation: spin10 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(36deg);
          transform: rotateX(10deg) rotateZ(36deg);
}

.lines11 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin11 10s linear infinite;
          animation: spin11 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(39.6deg);
          transform: rotateX(10deg) rotateZ(39.6deg);
}

.lines12 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin12 10s linear infinite;
          animation: spin12 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(43.2deg);
          transform: rotateX(10deg) rotateZ(43.2deg);
}

.lines13 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin13 10s linear infinite;
          animation: spin13 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(46.8deg);
          transform: rotateX(10deg) rotateZ(46.8deg);
}

.lines14 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin14 10s linear infinite;
          animation: spin14 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(50.4deg);
          transform: rotateX(10deg) rotateZ(50.4deg);
}

.lines15 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin15 10s linear infinite;
          animation: spin15 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(54deg);
          transform: rotateX(10deg) rotateZ(54deg);
}

.lines16 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin16 10s linear infinite;
          animation: spin16 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(57.6deg);
          transform: rotateX(10deg) rotateZ(57.6deg);
}

.lines17 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin17 10s linear infinite;
          animation: spin17 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(61.2deg);
          transform: rotateX(10deg) rotateZ(61.2deg);
}

.lines18 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin18 10s linear infinite;
          animation: spin18 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(64.8deg);
          transform: rotateX(10deg) rotateZ(64.8deg);
}

.lines19 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin19 10s linear infinite;
          animation: spin19 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(68.4deg);
          transform: rotateX(10deg) rotateZ(68.4deg);
}

.lines20 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin20 10s linear infinite;
          animation: spin20 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(72deg);
          transform: rotateX(10deg) rotateZ(72deg);
}

.lines21 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin21 10s linear infinite;
          animation: spin21 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(75.6deg);
          transform: rotateX(10deg) rotateZ(75.6deg);
}

.lines22 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin22 10s linear infinite;
          animation: spin22 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(79.2deg);
          transform: rotateX(10deg) rotateZ(79.2deg);
}

.lines23 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin23 10s linear infinite;
          animation: spin23 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(82.8deg);
          transform: rotateX(10deg) rotateZ(82.8deg);
}

.lines24 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin24 10s linear infinite;
          animation: spin24 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(86.4deg);
          transform: rotateX(10deg) rotateZ(86.4deg);
}

.lines25 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin25 10s linear infinite;
          animation: spin25 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(90deg);
          transform: rotateX(10deg) rotateZ(90deg);
}

.lines26 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin26 10s linear infinite;
          animation: spin26 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(93.6deg);
          transform: rotateX(10deg) rotateZ(93.6deg);
}

.lines27 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin27 10s linear infinite;
          animation: spin27 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(97.2deg);
          transform: rotateX(10deg) rotateZ(97.2deg);
}

.lines28 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin28 10s linear infinite;
          animation: spin28 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(100.8deg);
          transform: rotateX(10deg) rotateZ(100.8deg);
}

.lines29 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin29 10s linear infinite;
          animation: spin29 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(104.4deg);
          transform: rotateX(10deg) rotateZ(104.4deg);
}

.lines30 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin30 10s linear infinite;
          animation: spin30 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(108deg);
          transform: rotateX(10deg) rotateZ(108deg);
}

.lines31 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin31 10s linear infinite;
          animation: spin31 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(111.6deg);
          transform: rotateX(10deg) rotateZ(111.6deg);
}

.lines32 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin32 10s linear infinite;
          animation: spin32 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(115.2deg);
          transform: rotateX(10deg) rotateZ(115.2deg);
}

.lines33 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin33 10s linear infinite;
          animation: spin33 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(118.8deg);
          transform: rotateX(10deg) rotateZ(118.8deg);
}

.lines34 {
  width: 200%;
  height: 10px;
  background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #ffffff 100%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin34 10s linear infinite;
          animation: spin34 10s linear infinite;
  -webkit-transform: rotateX(10deg) rotateZ(122.4deg);
          transform: rotateX(10deg) rot.........完整代码请登录后点击上方下载按钮下载查看