div+css实现彩色炫酷六边形卷动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现彩色炫酷六边形卷动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #140032;
  overflow: hidden;
  margin: 0;
}
body *, body *:after, body *:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.hexagon {
  width: 150px;
  height: 75px;
}
.hexagon, .hexagon span {
  border-top-left-radius: 150px;
  border-bottom-right-radius: 150px;
}
.hexagon span {
  -webkit-animation: hexagon 3s linear infinite;
          animation: hexagon 3s linear infinite;
}
.hexagon span:after, .hexagon span:before {
  content: "";
  background-color: currentColor;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.hexagon span:before {
  transform: translate(75px, -37.5px);
}
.hexagon span:after {
  transform: translate(-75px, 37.5px);
}
.hexagon:nth-child(1) {
  transform: rotate(-7.2deg) translate(250px);
  color: #ff1f00;
}
.hexagon:nth-child(1) span {
  -webkit-animation-delay: -0.18s;
          animation-delay: -0.18s;
  background-color: rgba(255, 31, 0, 0.5);
}
.hexagon:nth-child(2) {
  transform: rotate(-14.4deg) translate(250px);
  color: #ff3d00;
}
.hexagon:nth-child(2) span {
  -webkit-animation-delay: -0.36s;
          animation-delay: -0.36s;
  background-color: rgba(255, 61, 0, 0.5);
}
.hexagon:nth-child(3) {
  transform: rotate(-21.6deg) translate(250px);
  color: #ff5c00;
}
.hexagon:nth-child(3) span {
  -webkit-animation-delay: -0.54s;
          animation-delay: -0.54s;
  background-color: rgba(255, 92, 0, 0.5);
}
.hexagon:nth-child(4) {
  transform: rotate(-28.8deg) translate(250px);
  color: #ff7a00;
}
.hexagon:nth-child(4) span {
  -webkit-animation-delay: -0.72s;
          animation-delay: -0.72s;
  background-color: rgba(255, 122, 0, 0.5);
}
.hexagon:nth-child(5) {
  transform: rotate(-36deg) translate(250px);
  color: #ff9900;
}
.hexagon:nth-child(5) span {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
  background-color: rgba(255, 153, 0, 0.5);
}
.hexagon:nth-child(6) {
  transform: rotate(-43.2deg) translate(250px);
  color: #ffb800;
}
.hexagon:nth-child(6) span {
  -webkit-animation-delay: -1.08s;
          animation-delay: -1.08s;
  background-color: rgba(255, 184, 0, 0.5);
}
.hexagon:nth-child(7) {
  transform: rotate(-50.4deg) translate(250px);
  color: #ffd600;
}
.hexagon:nth-child(7) span {
  -webkit-animation-delay: -1.26s;
          animation-delay: -1.26s;
  background-color: rgba(255, 214, 0, 0.5);
}
.hexagon:nth-child(8) {
  transform: rotate(-57.6deg) translate(250px);
  color: #fff500;
}
.hexagon:nth-child(8) span {
  -webkit-animation-delay: -1.44s;
          animation-delay: -1.44s;
  background-color: rgba(255, 245, 0, 0.5);
}
.hexagon:nth-child(9) {
  transform: rotate(-64.8deg) translate(250px);
  color: #ebff00;
}
.hexagon:nth-child(9) span {
  -webkit-animation-delay: -1.62s;
          animation-delay: -1.62s;
  background-color: rgba(235, 255, 0, 0.5);
}
.hexagon:nth-child(10) {
  transform: rotate(-72deg) translate(250px);
  color: #ccff00;
}
.hexagon:nth-child(10) span {
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  background-color: rgba(204, 255, 0, 0.5);
}
.hexagon:nth-child(11) {
  transform: rotate(-79.2deg) translate(250px);
  color: #adff00;
}
.hexagon:nth-child(11) span {
  -webkit-animation-delay: -1.98s;
          animation-delay: -1.98s;
  background-color: rgba(173, 255, 0, 0.5);
}
.hexagon:nth-child(12) {
  transform: rotate(-86.4deg) translate(250px);
  color: #8fff00;
}
.hexagon:nth-child(12) span {
  -webkit-animation-delay: -2.16s;
          animation-delay: -2.16s;
  background-color: rgba(143, 255, 0, 0.5);
}
.hexagon:nth-child(13) {
  transform: rotate(-93.6deg) translate(250px);
  color: #70ff00;
}
.hexagon:nth-child(13) span {
  -webkit-animation-delay: -2.34s;
          animation-delay: -2.34s;
  background-color: rgba(112, 255, 0, 0.5);
}
.hexagon:nth-child(14) {
  transform: rotate(-100.8deg) translate(250px);
  color: #52ff00;
}
.hexagon:nth-child(14) span {
  -webkit-animation-delay: -2.52s;
          animation-delay: -2.52s;
  background-color: rgba(82, 255, 0, 0.5);
}
.hexagon:nth-child(15) {
  transform: rotate(-108deg) translate(250px);
  color: #33ff00;
}
.hexagon:nth-child(15) span {
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
  background-color: rgba(51, 255, 0, 0.5);
}
.hexagon:nth-child(16) {
  transform: rotate(-115.2deg) translate(250px);
  color: #14ff00;
}
.hexagon:nth-child(16) span {
  -webkit-animation-delay: -2.88s;
          animation-delay: -2.88s;
  background-color: rgba(20, 255, 0, 0.5);
}
.hexagon:nth-child(17) {
  transform: rotate(-122.4deg) translate(250px);
  color: #00ff0a;
}
.hexagon:nth-child(17) span {
  -webkit-animation-delay: -3.06s;
          animation-delay: -3.06s;
  background-color: rgba(0, 255, 10, 0.5);
}
.hexagon:nth-child(18) {
  transform: rotate(-129.6deg) translate(250px);
  color: #00ff29;
}
.hexagon:nth-child(18) span {
  -webkit-animation-delay: -3.24s;
          animation-delay: -3.24s;
  background-color: rgba(0, 255, 41, 0.5);
}
.hexagon:nth-child(19) {
  transform: rotate(-136.8deg) translate(250px);
  color: #00ff47;
}
.hexagon:nth-child(19) span {
  -webkit-animation-delay: -3.42s;
          animation-delay: -3.42s;
  background-color: rgba(0, 255, 71, 0.5);
}
.hexagon:nth-child(20) {
  transform: rotate(-144deg) translate(250px);
  color: #00ff66;
}
.hexagon:nth-child(20) span {
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
  background-color: rgba(0, 255, 102, 0.5);
}
.hexagon:nth-child(21) {
  transform: rotate(-151.2deg) translate(250px);
  color: #00ff85;
}
.hexagon:nth-child(21) span {
  -webkit-animation-delay: -3.78s;
          animation-delay: -3.78s;
  background-color: rgba(0, 255, 133, 0.5);
}
.hexagon:nth-child(22) {
  transform: rotate(-158.4deg) translate(250px);
  color: #00ffa3;
}
.hexagon:nth-child(22) span {
  -webkit-animation-delay: -3.96s;
          animation-delay: -3.96s;
  background-color: rgba(0, 255, 163, 0.5);
}
.hexagon:nth-child(23) {
  transform: rotate(-165.6deg) translate(250px);
  color: #00ffc2;
}
.hexagon:nth-child(23) span {
  -webkit-animation-delay: -4.14s;
          animation-delay: -4.14s;
  background-color: rgba(0, 255, 194, 0.5);
}
.hexagon:nth-child(24) {
  transform: rotate(-172.8deg) translate(250px);
  color: #00ffe0;
}
.hexagon:nth-child(24) span {
  -webkit-animation-delay: -4.32s;
          animation-delay: -4.32s;
  background-color: rgba(0, 255, 224, 0.5);
}
.hexagon:nth-child(25) {
  transform: rotate(-180deg) translate(250px);
  color: aqua;
}
.hexagon:nth-child(25) span {
  -webkit-animation-delay: -4.5s;
          animation-delay: -4.5s;
  background-color: rgba(0, 255, 255, 0.5);
}
.hexagon:nth-child(26) {
  transform: rotate(-187.2deg) translate(250px);
  color: #00e0ff;
}
.hexagon:nth-child(26) span {
  -webkit-animation-delay: -4.68s;
          animation-delay: -4.68s;
  background-color: rgba(0, 224, 255, 0.5);
}
.hexagon:nth-child(27) {
  transform: rotate(-194.4deg) translate(250px);
  color: #00c2ff;
}
.hexagon:nth-child(27) span {
  -webkit-animation-delay: -4.86s;
          animation-delay: -4.86s;
  background-color: rgba(0, 194, 255, 0.5);
}
.hexagon:nth-child(28) {
  transform: rotate(-201.6deg) translate(250px);
  color: #00a3ff;
}
.hexagon:nth-child(28) span {
  -webkit-animation-delay: -5.04s;
          animation-delay: -5.04s;
  background-color: rgba(0, 163, 255, 0.5);
}
.hexagon:nth-child(29) {
  transform: rotate(-208.8deg) translate(250px);
  color: #0085ff;
}
.hexagon:nth-child(29) span {
  -webkit-animation-delay: -5.22s;
          animation-delay: -5.22s;
  background-color: rgba(0, 133, 255, 0.5);
}
.hexagon:nth-child(30) {
  transform: rotate(-216deg) translate(250px);
  color: #0066ff;
}
.hexagon:nth-child(30) span {
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
  background-color: rgba(0, 102, 255, 0.5);
}
.hexagon:nth-child(31) {
  transform: rotate(-223.2deg) translate(250px);
  color: #0047ff;
}
.hexagon:nth-child(31) span {
  -webkit-animation-delay: -5.58s;
          animation-delay: -5.58s;
  background-color: rgba(0, 71, 255, 0.5);
}
.hexagon:nth-child(32) {
  transform: rotate(-230.4deg) translate(250px);
  color: #0029ff;
}
.hexagon:nth-child(32) span {
  -webkit-animation-delay: -5.76s;
          animation-delay: -5.76s;
  background-color: rgba(0, 4.........完整代码请登录后点击上方下载按钮下载查看