svg+css实现彩色叶子变换动画效果代码-html代码-BFW代码库

svg+css实现彩色叶子变换动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现彩色叶子变换动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    BODY {
  background: #000;
}

.svg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.svg--rays {
  width: 100%;
  height: 100%;
}
.svg--hand {
  width: 95vmin;
  height: 95vmin;
}

.cell {
  fill: maroon;
  -webkit-animation: colors 3.5s linear infinite;
          animation: colors 3.5s linear infinite;
}
.cell:nth-child(24n + 1) {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.cell:nth-child(24n + 2) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.cell:nth-child(24n + 3) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.cell:nth-child(24n + 4) {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}
.cell:nth-child(24n + 5) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.cell:nth-child(24n + 6) {
  -webkit-animation-delay: -6.5s;
          animation-delay: -6.5s;
}
.cell:nth-child(24n + 7) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.cell:nth-child(24n + 8) {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}
.cell:nth-child(24n + 9) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
.cell:nth-child(24n + 10) {
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
}
.cell:nth-child(24n + 11) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.cell:nth-child(24n + 12) {
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.cell:nth-child(24n + 13) {
  -webkit-animation-delay: -6.5s;
          animation-delay: -6.5s;
}
.cell:nth-child(24n + 14) {
  -webkit-animation-delay: -11s;
          animation-delay: -11s;
}
.cell:nth-child(24n + 15) {
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.cell:nth-child(24n + 16) {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}
.cell:nth-child(24n + 17) {
  -webkit-animation-delay: -8.5s;
          animation-delay: -8.5s;
}
.cell:nth-child(24n + 18) {
  -webkit-animation-delay: -11s;
          animation-delay: -11s;
}
.cell:nth-child(24n + 19) {
  -webkit-animation-delay: -9.5s;
          animation-delay: -9.5s;
}
.cell:nth-child(24n + 20) {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}
.cell:nth-child(24n + 21) {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}
.cell:nth-child(24n + 22) {
  -webkit-animation-delay: -4.5s;
          a.........完整代码请登录后点击上方下载按钮下载查看