css+div实现跳舞的彩虹动画效果代码-html代码-BFW代码库

css+div实现跳舞的彩虹动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现跳舞的彩虹动画效果代码

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

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

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

  
<style>
.ac {
  --r: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
  --s: calc((var(--r) * 2 * 3.14 / var(--tc, 1)));
  --dist: 30vmin;
  --c: #F9F6EF;
  position: absolute;
  border: 1px solid;
  display: grid;
  width: var(--s);
  height: 50%;
  top: calc(50% - var(--s) / 2);
  left: calc(50% - var(--s) / 2);
  --x: calc(cos(var(--angl))
        * var(--dist));
  --y: calc(sin(var(--angl))
        * var(--dist));
  translate: var(--x) var(--y);
  --half: calc(var(--s) * .5);
  transform-origin: calc(var(--half) - var(--x)) calc(var(--half) - var(--y));
  transform: rotatex(var(--angl));
  color: hsl(var(--angl), 70%, 60%);
  --a1: calc(360 / var(--tc) * (var(--i) - 1));
  --a2: calc(360 / var(--tc) * (var(--i) + 1));
  background-image: linear-gradient(90deg, hsl(var(--a1), 70%, 60%), hsl(var(--a2), 70%, 60%));
  animation: around 40s linear infinite -2s;
}

@keyframes around {
  from {
    transform: rotatey(0deg) rotatex(var(--angl)) rotatez(calc(1440deg - var(--angl)));
  }
  to {
    transform: rotatey(-360deg) rotatex(var(--angl)) rotatez(calc(-1 * var(--angl)));
  }
}
.cont {
  transform-style: preserve-3d;
  width: 50vmin;
  aspect-ratio: 1;
  position: relative;
  border-radius: 100vmax;
  display: grid;
  align-content: center;
  justify-content: center;
  filter: drop-shadow(0px 0px 2px #fff) drop-shadow(10px 10px 4px #0005);
  animation: flip 10s ease infinite alternate;
}

@keyframes flip {
  from {
    transform: rotatex(0deg);
  }
  to {
    transform: rotatex(-10deg);
  }
}
body {
  background-color: #F9F6EF;
  color: #1f2020;
  display: grid;
  place-content: center;
  min-height: 100svh;
  min-height: 100vh;
  margin: 0;
  perspective: 1000px;
}
</style>

  
  
</head>

<body >
  <div class="cont">
  <div class="ac" style="--angl:0deg; --i:0; --tc:30"> </div>
  <div class="ac" style="--angl:12deg; --i:1; --tc:30"> </div>
  <div class="ac" style="--angl:24deg; --i:2; --tc:30"> </div>
  <div class="ac" style="--angl:36deg; --i:3; --tc:30"> </div>
  <div class="ac" style="--angl:48deg; --i:4; --tc:30"> </div>
  <.........完整代码请登录后点击上方下载按钮下载查看