纯css实现多彩雨伞飞舞动画效果
代码语言：html
所属分类：动画
代码描述：纯css实现多彩雨伞飞舞动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #73e8ff;
height: 100vh;
overflow: hidden;
display: -webkit-box;
display: flex;
font-family: 'Varela Round', sans-serif;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-perspective: 800px;
perspective: 800px;
}
.title {
font-size: 60px;
color: #fff;
-webkit-transform: rotateX(40deg);
transform: rotateX(40deg);
}
div {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.camera.-x {
-webkit-transform: rotateX(130deg);
transform: rotateX(130deg);
}
.pole {
top: 60px;
left: -3px;
width: 6px;
height: 200px;
background: #000;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: rotateX(-90deg) translateY(2px);
transform: rotateX(-90deg) translateY(2px);
border-radius: 999px;
}
.pole .hand {
-webkit-transform: translateX(-8px) rotateY(180deg);
transform: translateX(-8px) rotateY(180deg);
bottom: -0.9em;
color: #000;
font-size: 80px;
}
.bones {
-webkit-transform-origin: 0 60px;
transform-origin: 0 60px;
-webkit-transform: rotateZ(22.5deg);
transform: rotateZ(22.5deg);
}
.bones .bone {
top: 60px;
width: 2px;
height: 110px;
background: #000;
-webkit-transform-origin: 1px 0;
transform-origin: 1px 0;
}
.bones .bone:nth-child(1) {
-webkit-transform: rotateZ(45deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(45deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(2) {
-webkit-transform: rotateZ(90deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(90deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(3) {
-webkit-transform: rotateZ(135deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(135deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(4) {
-webkit-transform: rotateZ(180deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(180deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(5) {
-webkit-transform: rotateZ(225deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(225deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(6) {
-webkit-transform: rotateZ(270deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(270deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(7) {
-webkit-transform: rotateZ(315deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(315deg) translateZ(-75px) rotateX(20deg);
}
.bones .bone:nth-child(8) {
-webkit-transform: rotateZ(360deg) translateZ(-75px) rotateX(20deg);
transform: rotateZ(360deg) translateZ(-75px) rotateX(20deg);
}
.umbrella .body {
-webkit-transform-origin: 0 60px;
transform-origin: 0 60px;
}
.umbrella .arm {
-webkit-transform-origin: 0 60px;
transform-origin: 0 60px;
}
.umbrella .arm .cloth {
-webkit-transform-origin: 0 60px;
transform-origin: 0 60px;
}
.umbrella .arm .cloth.-cloth1 {
width: 122px;
height: 120px;
-webkit-clip-path: polygon(-1px 50%, 100% 10.3%, 100% 89.7%);
clip-path: polygon(-1px 50%, 100% 10.3%, 100% 89.7%);
}
.umbrella .arm .cloth.-cloth2 {
left: 120px;
width: 40px;
height: 120px;
-webkit-clip-path: polygon(0 89.5%, 0 10.5%, 100% 0, 100% 100%);
clip-path: polygon(0 89.5%, 0 10.5%, 100% 0, 100% 100%);
}
.umbrella .arm:nth-child(1) {
-webkit-transform: rotateZ(45deg) rotateY(20deg);
transform: rotateZ(45deg) rotateY(20deg);
}
.umbrella .arm:nth-child(1) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(2) {
-webkit-transform: rotateZ(90deg) rotateY(20deg);
transform: rotateZ(90deg) rotateY(20deg);
}
.umbrella .arm:nth-child(2) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(3) {
-webkit-transform: rotateZ(135deg) rotateY(20deg);
transform: rotateZ(135deg) rotateY(20deg);
}
.umbrella .arm:nth-child(3) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(4) {
-webkit-transform: rotateZ(180deg) rotateY(20deg);
transform: rotateZ(180deg) rotateY(20deg);
}
.umbrella .arm:nth-child(4) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(5) {
-webkit-transform: rotateZ(225deg) rotateY(20deg);
transform: rotateZ(225deg) rotateY(20deg);
}
.umbrella .arm:nth-child(5) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(6) {
-webkit-transform: rotateZ(270deg) rotateY(20deg);
transform: rotateZ(270deg) rotateY(20deg);
}
.umbrella .arm:nth-child(6) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(7) {
-webkit-transform: rotateZ(315deg) rotateY(20deg);
transform: rotateZ(315deg) rotateY(20deg);
}
.umbrella .arm:nth-child(7) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella .arm:nth-child(8) {
-webkit-transform: rotateZ(360deg) rotateY(20deg);
transform: rotateZ(360deg) rotateY(20deg);
}
.umbrella .arm:nth-child(8) .-cloth2 {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
.umbrella:nth-child(1) {
top: 262px;
left: -894px;
-webkit-animation: fly 29500ms -16760ms linear infinite;
animation: fly 29500ms -16760ms linear infinite;
}
.umbrella:nth-child(1) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#12ab2a), to(#44dd5c));
background: linear-gradient(180deg, #12ab2a, #44dd5c);
}
.umbrella:nth-child(1) .hand {
color: #44dd5c;
}
.umbrella:nth-child(1) .body {
-webkit-animation: rotate 20260ms -29040ms linear infinite;
animation: rotate 20260ms -29040ms linear infinite;
}
.umbrella:nth-child(2) {
top: -547px;
left: 975px;
-webkit-animation: fly 29500ms -969ms linear infinite;
animation: fly 29500ms -969ms linear infinite;
}
.umbrella:nth-child(2) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#ba5c71), to(#ec8ea3));
background: linear-gradient(180deg, #ba5c71, #ec8ea3);
}
.umbrella:nth-child(2) .hand {
color: #ec8ea3;
}
.umbrella:nth-child(2) .body {
-webkit-animation: rotate 10044ms -7516ms linear infinite;
animation: rotate 10044ms -7516ms linear infinite;
}
.umbrella:nth-child(3) {
top: -884px;
left: -195px;
-webkit-animation: fly 29500ms -24187ms linear infinite;
animation: fly 29500ms -24187ms linear infinite;
}
.umbrella:nth-child(3) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#027327), to(#34a559));
background: linear-gradient(180deg, #027327, #34a559);
}
.umbrella:nth-child(3) .hand {
color: #34a559;
}
.umbrella:nth-child(3) .body {
-webkit-animation: rotate 18761ms -96283ms linear infinite;
animation: rotate 18761ms -96283ms linear infinite;
}
.umbrella:nth-child(4) {
top: -1288px;
left: 900px;
-webkit-animation: fly 29500ms -24251ms linear infinite;
animation: fly 29500ms -24251ms linear infinite;
}
.umbrella:nth-child(4) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#79246d), to(#ab569f));
background: linear-gradient(180deg, #79246d, #ab569f);
}
.umbrella:nth-child(4) .hand {
color: #ab569f;
}
.umbrella:nth-child(4) .body {
-webkit-animation: rotate 11575ms -85054ms linear infinite;
animation: rotate 11575ms -85054ms linear infinite;
}
.umbrella:nth-child(5) {
top: 447px;
left: -107px;
-webkit-animation: fly 29500ms -13798ms linear infinite;
animation: fly 29500ms -13798ms linear infinite;
}
.umbrella:nth-child(5) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#885701), to(#ba8933));
background: linear-gradient(180deg, #885701, #ba8933);
}
.umbrella:nth-child(5) .hand {
color: #ba8933;
}
.umbrella:nth-child(5) .body {
-webkit-animation: rotate 28155ms -8834ms linear infinite;
animation: rotate 28155ms -8834ms linear infinite;
}
.umbrella:nth-child(6) {
top: -1124px;
left: 921px;
-webkit-animation: fly 29500ms -8635ms linear infinite;
animation: fly 29500ms -8635ms linear infinite;
}
.umbrella:nth-child(6) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#199c28), to(#4bce5a));
background: linear-gradient(180deg, #199c28, #4bce5a);
}
.umbrella:nth-child(6) .hand {
color: #4bce5a;
}
.umbrella:nth-child(6) .body {
-webkit-animation: rotate 24308ms -80345ms linear infinite;
animation: rotate 24308ms -80345ms linear infinite;
}
.umbrella:nth-child(7) {
top: 273px;
left: 560px;
-webkit-animation: fly 29500ms -19700ms linear infinite;
animation: fly 29500ms -19700ms linear infinite;
}
.umbrella:nth-child(7) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#0169ae), to(#339be0));
background: linear-gradient(180deg, #0169ae, #339be0);
}
.umbrella:nth-child(7) .hand {
color: #339be0;
}
.umbrella:nth-child(7) .body {
-webkit-animation: rotate 10773ms -60464ms linear infinite;
animation: rotate 10773ms -60464ms linear infinite;
}
.umbrella:nth-child(8) {
top: 61px;
left: 552px;
-webkit-animation: fly 29500ms -25330ms linear infinite;
animation: fly 29500ms -25330ms linear infinite;
}
.umbrella:nth-child(8) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#af0c9f), to(#e13ed1));
background: linear-gradient(180deg, #af0c9f, #e13ed1);
}
.umbrella:nth-child(8) .hand {
color: #e13ed1;
}
.umbrella:nth-child(8) .body {
-webkit-animation: rotate 23771ms -67912ms linear infinite;
animation: rotate 23771ms -67912ms linear infinite;
}
.umbrella:nth-child(9) {
top: -388px;
left: 209px;
-webkit-animation: fly 29500ms -22402ms linear infinite;
animation: fly 29500ms -22402ms linear infinite;
}
.umbrella:nth-child(9) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#494457), to(#7b7689));
background: linear-gradient(180deg, #494457, #7b7689);
}
.umbrella:nth-child(9) .hand {
color: #7b7689;
}
.umbrella:nth-child(9) .body {
-webkit-animation: rotate 15651ms -6733ms linear infinite;
animation: rotate 15651ms -6733ms linear infinite;
}
.umbrella:nth-child(10) {
top: -818px;
left: -134px;
-webkit-animation: fly 29500ms -10973ms linear infinite;
animation: fly 29500ms -10973ms linear infinite;
}
.umbrella:nth-child(10) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#972506), to(#c95738));
background: linear-gradient(180deg, #972506, #c95738);
}
.umbrella:nth-child(10) .hand {
color: #c95738;
}
.umbrella:nth-child(10) .body {
-webkit-animation: rotate 12352ms -22937ms linear infinite;
animation: rotate 12352ms -22937ms linear infinite;
}
.umbrella:nth-child(11) {
top: 463px;
left: -691px;
-webkit-animation: fly 29500ms -29231ms linear infinite;
animation: fly 29500ms -29231ms linear infinite;
}
.umbrella:nth-child(11) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#7b1a1f), to(#ad4c51));
background: linear-gradient(180deg, #7b1a1f, #ad4c51);
}
.umbrella:nth-child(11) .hand {
color: #ad4c51;
}
.umbrella:nth-child(11) .body {
-webkit-animation: rotate 16662ms -36014ms linear infinite;
animation: rotate 16662ms -36014ms linear infinite;
}
.umbrella:nth-child(12) {
top: 224px;
left: -756px;
-webkit-animation: fly 29500ms -10787ms linear infinite;
animation: fly 29500ms -10787ms linear infinite;
}
.umbrella:nth-child(12) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#0f333f), to(#416571));
background: linear-gradient(180deg, #0f333f, #416571);
}
.umbrella:nth-child(12) .hand {
color: #416571;
}
.umbrella:nth-child(12) .body {
-webkit-animation: rotate 22476ms -86936ms linear infinite;
animation: rotate 22476ms -86936ms linear infinite;
}
.umbrella:nth-child(13) {
top: -462px;
left: -533px;
-webkit-animation: fly 29500ms -14307ms linear infinite;
animation: fly 29500ms -14307ms linear infinite;
}
.umbrella:nth-child(13) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#2b7e1f), to(#5db051));
background: linear-gradient(180deg, #2b7e1f, #5db051);
}
.umbrella:nth-child(13) .hand {
color: #5db051;
}
.umbrella:nth-child(13) .body {
-webkit-animation: rotate 29091ms -1964ms linear infinite;
animation: rotate 29091ms -1964ms linear infinite;
}
.umbrella:nth-child(14) {
top: -122px;
left: 762px;
-webkit-animation: fly 29500ms -18483ms linear infinite;
animation: fly 29500ms -18483ms linear infinite;
}
.umbrella:nth-child(14) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#604971), to(#927ba3));
background: linear-gradient(180deg, #604971, #927ba3);
}
.umbrella:nth-child(14) .hand {
color: #927ba3;
}
.umbrella:nth-child(14) .body {
-webkit-animation: rotate 25023ms -5231ms linear infinite;
animation: rotate 25023ms -5231ms linear infinite;
}
.umbrella:nth-child(15) {
top: 173px;
left: 423px;
-webkit-animation: fly 29500ms -16714ms linear infinite;
animation: fly 29500ms -16714ms linear infinite;
}
.umbrella:nth-child(15) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#9abf9a), to(#ccf1cc));
background: linear-gradient(180deg, #9abf9a, #ccf1cc);
}
.umbrella:nth-child(15) .hand {
color: #ccf1cc;
}
.umbrella:nth-child(15) .body {
-webkit-animation: rotate 11855ms -65793ms linear infinite;
animation: rotate 11855ms -65793ms linear infinite;
}
.umbrella:nth-child(16) {
top: -1103px;
left: -236px;
-webkit-animation: fly 29500ms -12179ms linear infinite;
animation: fly 29500ms -12179ms linear infinite;
}
.umbrella:nth-child(16) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#7d6041), to(#af9273));
background: linear-gradient(180deg, #7d6041, #af9273);
}
.umbrella:nth-child(16) .hand {
color: #af9273;
}
.umbrella:nth-child(16) .body {
-webkit-animation: rotate 17711ms -2157ms linear infinite;
animation: rotate 17711ms -2157ms linear infinite;
}
.umbrella:nth-child(17) {
top: -78px;
left: -733px;
-webkit-animation: fly 29500ms -28294ms linear infinite;
animation: fly 29500ms -28294ms linear infinite;
}
.umbrella:nth-child(17) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#101860), to(#424a92));
background: linear-gradient(180deg, #101860, #424a92);
}
.umbrella:nth-child(17) .hand {
color: #424a92;
}
.umbrella:nth-child(17) .body {
-webkit-animation: rotate 15401ms -53109ms linear infinite;
animation: rotate 15401ms -53109ms linear infinite;
}
.umbrella:nth-child(18) {
top: -1187px;
left: -399px;
-webkit-animation: fly 29500ms -26626ms linear infinite;
animation: fly 29500ms -26626ms linear infinite;
}
.umbrella:nth-child(18) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#437904), to(#75ab36));
background: linear-gradient(180deg, #437904, #75ab36);
}
.umbrella:nth-child(18) .hand {
color: #75ab36;
}
.umbrella:nth-child(18) .body {
-webkit-animation: rotate 17842ms -89941ms linear infinite;
animation: rotate 17842ms -89941ms linear infinite;
}
.umbrella:nth-child(19) {
top: 187px;
left: -475px;
-webkit-animation: fly 29500ms -25054ms linear infinite;
animation: fly 29500ms -25054ms linear infinite;
}
.umbrella:nth-child(19) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#311a63), to(#634c95));
background: linear-gradient(180deg, #311a63, #634c95);
}
.umbrella:nth-child(19) .hand {
color: #634c95;
}
.umbrella:nth-child(19) .body {
-webkit-animation: rotate 15855ms -46708ms linear infinite;
animation: rotate 15855ms -46708ms linear infinite;
}
.umbrella:nth-child(20) {
top: 190px;
left: -117px;
-webkit-animation: fly 29500ms -24784ms linear infinite;
animation: fly 29500ms -24784ms linear infinite;
}
.umbrella:nth-child(20) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#4bb71e), to(#7de950));
background: linear-gradient(180deg, #4bb71e, #7de950);
}
.umbrella:nth-child(20) .hand {
color: #7de950;
}
.umbrella:nth-child(20) .body {
-webkit-animation: rotate 26572ms -91504ms linear infinite;
animation: rotate 26572ms -91504ms linear infinite;
}
.umbrella:nth-child(21) {
top: -689px;
left: 374px;
-webkit-animation: fly 29500ms -3136ms linear infinite;
animation: fly 29500ms -3136ms linear infinite;
}
.umbrella:nth-child(21) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#5ec50f), to(#90f741));
background: linear-gradient(180deg, #5ec50f, #90f741);
}
.umbrella:nth-child(21) .hand {
color: #90f741;
}
.umbrella:nth-child(21) .body {
-webkit-animation: rotate 29519ms -67659ms linear infinite;
animation: rotate 29519ms -67659ms linear infinite;
}
.umbrella:nth-child(22) {
top: -16px;
left: -953px;
-webkit-animation: fly 29500ms -20399ms linear infinite;
animation: fly 29500ms -20399ms linear infinite;
}
.umbrella:nth-child(22) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#547321), to(#86a553));
background: linear-gradient(180deg, #547321, #86a553);
}
.umbrella:nth-child(22) .hand {
color: #86a553;
}
.umbrella:nth-child(22) .body {
-webkit-animation: rotate 22515ms -98770ms linear infinite;
animation: rotate 22515ms -98770ms linear infinite;
}
.umbrella:nth-child(23) {
top: 85px;
left: 389px;
-webkit-animation: fly 29500ms -2684ms linear infinite;
animation: fly 29500ms -2684ms linear infinite;
}
.umbrella:nth-child(23) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#85b990), to(#b7ebc2));
background: linear-gradient(180deg, #85b990, #b7ebc2);
}
.umbrella:nth-child(23) .hand {
color: #b7ebc2;
}
.umbrella:nth-child(23) .body {
-webkit-animation: rotate 24870ms -81822ms linear infinite;
animation: rotate 24870ms -81822ms linear infinite;
}
.umbrella:nth-child(24) {
top: -582px;
left: 969px;
-webkit-animation: fly 29500ms -18158ms linear infinite;
animation: fly 29500ms -18158ms linear infinite;
}
.umbrella:nth-child(24) .cloth {
background: -webkit-gradient(linear, left top, left bottom, from(#317854), to(#63aa86));
ba.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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