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;
animation-delay: -4.5s;
}
.cell:nth-child(24n + 23) {
-webkit-animation-delay: -3.5s;
animation-delay: -3.5s;
}
.cell:nth-child(24n + 24) {
-webkit-animation-delay: -4.5s;
animation-delay: -4.5s;
}
@-webkit-keyframes colors {
0% {
fill: maroon;
}
10% {
fill: crimson;
}
20% {
fill: orangered;
}
30% {
fill: gold;
}
40% {
fill: yellowgreen;
}
50% {
fill: skyblue;
}
60% {
fill: steelblue;
}
70% {
fill: slateblue;
}
80% {
fill: darkviolet;
}
90% {
fill: purple;
}
}
@keyframes colors {
0% {
fill: maroon;
}
10% {
fill: crimson;
}
20% {
fill: orangered;
}
30% {
fill: gold;
}
40% {
fill: yellowgreen;
}
50% {
fill: skyblue;
}
60% {
fill: steelblue;
}
70% {
fill: slateblue;
}
80% {
fill: darkviolet;
}
90% {
fill: purple;
}
}
.c-rays {
fill: none;
stroke: #050505;
stroke-width: 100%;
stroke-dasharray: 5%;
-webkit-animation: rotate 20s linear infinite;
animation: rotate 20s linear infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg class="svg svg--rays">
<circle r="50%" cx="50%" cy="50%" class="c-rays"></circle>
</svg>
<svg class="svg svg--hand" viewBox="0 0 700 440">
<defs>
<mask id="mask"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<image xlink:href="https://img-fotki.yandex.ru/get/9167/5091629.a4/0_8d418_ba8c7e7d_orig"
width="700" height="440"></image>
</mask>
<pattern
id="patt" width="500" height="500"
patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
<rect width="10" height="10"
fill="maroon" class="cell"></rect>
<rect width="10" height="10" x="10"
fill="crimson" class="cell"></rect>
<rect width="10" height="10" x="20"
fill="orangered" class="cell"></rect>
<rect width="10" height="10" x="30"
fill="gold" class="cell"></rect>
<rect width="10" height="10" x="40"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10" x="50"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10" x="60"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10" x="70"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10" x="80"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10" x="90"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="10"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="10"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="10"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="10"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="10"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="10"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="10"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="10"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="10"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="10"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="20"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="20"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="20"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="20"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="20"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="20"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="20"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="20"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="20"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="20"
fill="purple" class="cell"></rect>
<!-- line -->
<rect width="10" height="10"
y="30"
fill="maroon" class="cell"></rect>
<rect width="10" height="10"
x="10" y="30"
fill="crimson" class="cell"></rect>
<rect width="10" height="10"
x="20" y="30"
fill="orangered" class="cell"></rect>
<rect width="10" height="10"
x="30" y="30"
fill="gold" class="cell"></rect>
<rect width="10" height="10"
x="40" y="30"
fill="yellowgreen" class="cell"></rect>
<rect width="10" height="10"
x="50" y="30"
fill="skyblue" class="cell"></rect>
<rect width="10" height="10"
x="60" y="30"
fill="steelblue" class="cell"></rect>
<rect width="10" height="10"
x="70" y="30"
fill="darkslateblue" class="cell"></rect>
<rect width="10" height="10"
x="80" y="30"
fill="darkviolet" class="cell"></rect>
<rect width="10" height="10"
x="90" y="30"
fill="purple" class="cell"></re.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0