div+css实现彩虹动画背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：div+css实现彩虹动画背景效果代码

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

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

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

  
  
  
<style>
body {
  overflow: hidden;
}

.rainbow {
  height: 100vh;
  width: 0;
  top: 0;
  position: absolute;
  transform: rotate(10deg);
  transform-origin: top right;
}
.rainbow:nth-child(1) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 43.875s linear infinite slide;
  animation-delay: -2.25s;
}
.rainbow:nth-child(2) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 42.75s linear infinite slide;
  animation-delay: -4.5s;
}
.rainbow:nth-child(3) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 41.625s linear infinite slide;
  animation-delay: -6.75s;
}
.rainbow:nth-child(4) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 40.5s linear infinite slide;
  animation-delay: -9s;
}
.rainbow:nth-child(5) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 39.375s linear infinite slide;
  animation-delay: -11.25s;
}
.rainbow:nth-child(6) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 38.25s linear infinite slide;
  animation-delay: -13.5s;
}
.rainbow:nth-child(7) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 37.125s linear infinite slide;
  animation-delay: -15.75s;
}
.rainbow:nth-child(8) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 36s linear infinite slide;
  animation-delay: -18s;
}
.rainbow:nth-child(9) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 34.875s linear infinite slide;
  animation-delay: -20.25s;
}
.rainbow:nth-child(10) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #e879f9, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 33.75s linear infinite slide;
  animation-delay: -22.5s;
}
.rainbow:nth-child(11) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 32.625s linear infinite slide;
  animation-delay: -24.75s;
}
.rainbow:nth-child(12) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px white;
  animation: 31.5s linear infinite slide;
  animation-delay: -27s;
}
.rainbow:nth-child(13) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 30.375s linear infinite slide;
  animation-delay: -29.25s;
}
.rainbow:nth-child(14) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #e879f9, 130px 0 80px 40px white;
  animation: 29.25s linear infinite slide;
  animation-delay: -31.5s;
}
.rainbow:nth-child(15) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px white;
  animation: 28.125s linear infinite slide;
  animation-delay: -33.75s;
}
.rainbow:nth-child(16) {
  box-shadow: -130px 0 80px 40px white, -50px 0 50px 25px #5eead4, 0 0 50px 25px #e879f9, 50px 0 50px 25px #60a5.........完整代码请登录后点击上方下载按钮下载查看