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

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

代码语言：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 50p.........完整代码请登录后点击上方下载按钮下载查看