纯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)); background: linear-gradient(180deg, #317854, #63aa86); } .umbrella:nth-child(24) .hand { color: #63aa86; } .umbrella:nth-child(24) .body { -webkit-animation: rotate 10221ms -17588ms linear infinite; animation: rotate 10221ms -17588ms linear infinite; } .umbrella:nth-child(25) { top: -1191px; left: -317px; -webkit-animation: fly 29500ms -148ms linear infinite; animation: fly 29500ms -148ms linear infinite; } .umbrella:nth-child(25) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#139e6c), to(#45d09e)); background: linear-gradient(180deg, #139e6c, #45d09e); } .umbrella:nth-child(25) .hand { color: #45d09e; } .umbrella:nth-child(25) .body { -webkit-animation: rotate 22834ms -11389ms linear infinite; animation: rotate 22834ms -11389ms linear infinite; } .umbrella:nth-child(26) { top: 232px; left: 810px; -webkit-animation: fly 29500ms -26879ms linear infinite; animation: fly 29500ms -26879ms linear infinite; } .umbrella:nth-child(26) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#298c1e), to(#5bbe50)); background: linear-gradient(180deg, #298c1e, #5bbe50); } .umbrella:nth-child(26) .hand { color: #5bbe50; } .umbrella:nth-child(26) .body { -webkit-animation: rotate 11680ms -22647ms linear infinite; animation: rotate 11680ms -22647ms linear infinite; } .umbrella:nth-child(27) { top: 459px; left: 230px; -webkit-animation: fly 29500ms -16096ms linear infinite; animation: fly 29500ms -16096ms linear infinite; } .umbrella:nth-child(27) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#020f88), to(#3441ba)); background: linear-gradient(180deg, #020f88, #3441ba); } .umbrella:nth-child(27) .hand { color: #3441ba; } .umbrella:nth-child(27) .body { -webkit-animation: rotate 28441ms -47924ms linear infinite; animation: rotate 28441ms -47924ms linear infinite; } .umbrella:nth-child(28) { top: -951px; left: -902px; -webkit-animation: fly 29500ms -27250ms linear infinite; animation: fly 29500ms -27250ms linear infinite; } .umbrella:nth-child(28) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#bf6cb2), to(#f19ee4)); background: linear-gradient(180deg, #bf6cb2, #f19ee4); } .umbrella:nth-child(28) .hand { color: #f19ee4; } .umbrella:nth-child(28) .body { -webkit-animation: rotate 15188ms -51072ms linear infinite; animation: rotate 15188ms -51072ms linear infinite; } .umbrella:nth-child(29) { top: -397px; left: -67px; -webkit-animation: fly 29500ms -17359ms linear infinite; animation: fly 29500ms -17359ms linear infinite; } .umbrella:nth-child(29) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#c70b8b), to(#f93dbd)); background: linear-gradient(180deg, #c70b8b, #f93dbd); } .umbrella:nth-child(29) .hand { color: #f93dbd; } .umbrella:nth-child(29) .body { -webkit-animation: rotate 23004ms -45001ms linear infinite; animation: rotate 23004ms -45001ms linear infinite; } .umbrella:nth-child(30) { top: -1233px; left: -104px; -webkit-animation: fly 29500ms -9577ms linear infinite; animation: fly 29500ms -9577ms linear infinite; } .umbrella:nth-child(30) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#3cba4f), to(#6eec81)); background: linear-gradient(180deg, #3cba4f, #6eec81); } .umbrella:nth-child(30) .hand { color: #6eec81; } .umbrella:nth-child(30) .body { -webkit-animation: rotate 20764ms -58165ms linear infinite; animation: rotate 20764ms -58165ms linear infinite; } .umbrella:nth-child(31) { top: -309px; left: 252px; -webkit-animation: fly 29500ms -28344ms linear infinite; animation: fly 29500ms -28344ms linear infinite; } .umbrella:nth-child(31) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#6a59c6), to(#9c8bf8)); background: linear-gradient(180deg, #6a59c6, #9c8bf8); } .umbrella:nth-child(31) .hand { color: #9c8bf8; } .umbrella:nth-child(31) .body { -webkit-animation: rotate 21900ms -92925ms linear infinite; animation: rotate 21900ms -92925ms linear infinite; } .umbrella:nth-child(32) { top: 125px; left: -363px; -webkit-animation: fly 29500ms -20367ms linear infinite; animation: fly 29500ms -20367ms linear infinite; } .umbrella:nth-child(32) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#68094c), to(#9a3b7e)); background: linear-gradient(180deg, #68094c, #9a3b7e); } .umbrella:nth-child(32) .hand { color: #9a3b7e; } .umbrella:nth-child(32) .body { -webkit-animation: rotate 28242ms -30181ms linear infinite; animation: rotate 28242ms -30181ms linear infinite; } .umbrella:nth-child(33) { top: -1005px; left: -628px; -webkit-animation: fly 29500ms -23090ms linear infinite; animation: fly 29500ms -23090ms linear infinite; } .umbrella:nth-child(33) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#1c1d25), to(#4e4f57)); background: linear-gradient(180deg, #1c1d25, #4e4f57); } .umbrella:nth-child(33) .hand { color: #4e4f57; } .umbrella:nth-child(33) .body { -webkit-animation: rotate 25452ms -88276ms linear infinite; animation: rotate 25452ms -88276ms linear infinite; } .umbrella:nth-child(34) { top: 364px; left: -175px; -webkit-animation: fly 29500ms -26460ms linear infinite; animation: fly 29500ms -26460ms linear infinite; } .umbrella:nth-child(34) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#612342), to(#935574)); background: linear-gradient(180deg, #612342, #935574); } .umbrella:nth-child(34) .hand { color: #935574; } .umbrella:nth-child(34) .body { -webkit-animation: rotate 20206ms -2206ms linear infinite; animation: rotate 20206ms -2206ms linear infinite; } .umbrella:nth-child(35) { top: -86px; left: 236px; -webkit-animation: fly 29500ms -7376ms linear infinite; animation: fly 29500ms -7376ms linear infinite; } .umbrella:nth-child(35) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#62be97), to(#94f0c9)); background: linear-gradient(180deg, #62be97, #94f0c9); } .umbrella:nth-child(35) .hand { color: #94f0c9; } .umbrella:nth-child(35) .body { -webkit-animation: rotate 21278ms -81441ms linear infinite; animation: rotate 21278ms -81441ms linear infinite; } .umbrella:nth-child(36) { top: -696px; left: 365px; -webkit-animation: fly 29500ms -5977ms linear infinite; animation: fly 29500ms -5977ms linear infinite; } .umbrella:nth-child(36) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#7c090c), to(#ae3b3e)); background: linear-gradient(180deg, #7c090c, #ae3b3e); } .umbrella:nth-child(36) .hand { color: #ae3b3e; } .umbrella:nth-child(36) .body { -webkit-animation: rotate 23426ms -17047ms linear infinite; animation: rotate 23426ms -17047ms linear infinite; } .umbrella:nth-child(37) { top: -631px; left: 964px; -webkit-animation: fly 29500ms -29064ms linear infinite; animation: fly 29500ms -29064ms linear infinite; } .umbrella:nth-child(37) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#667e6d), to(#98b09f)); background: linear-gradient(180deg, #667e6d, #98b09f); } .umbrella:nth-child(37) .hand { color: #98b09f; } .umbrella:nth-child(37) .body { -webkit-animation: rotate 27837ms -54366ms linear infinite; animation: rotate 27837ms -54366ms linear infinite; } .umbrella:nth-child(38) { top: -1392px; left: -97px; -webkit-animation: fly 29500ms -4364ms linear infinite; animation: fly 29500ms -4364ms linear infinite; } .umbrella:nth-child(38) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#9f0c23), to(#d13e55)); background: linear-gradient(180deg, #9f0c23, #d13e55); } .umbrella:nth-child(38) .hand { color: #d13e55; } .umbrella:nth-child(38) .body { -webkit-animation: rotate 15668ms -60696ms linear infinite; animation: rotate 15668ms -60696ms linear infinite; } .umbrella:nth-child(39) { top: 120px; left: 170px; -webkit-animation: fly 29500ms -25349ms linear infinite; animation: fly 29500ms -25349ms linear infinite; } .umbrella:nth-child(39) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#4db2b6), to(#7fe4e8)); background: linear-gradient(180deg, #4db2b6, #7fe4e8); } .umbrella:nth-child(39) .hand { color: #7fe4e8; } .umbrella:nth-child(39) .body { -webkit-animation: rotate 17443ms -94159ms linear infinite; animation: rotate 17443ms -94159ms linear infinite; } .umbrella:nth-child(40) { top: 430px; left: 720px; -webkit-animation: fly 29500ms -6235ms linear infinite; animation: fly 29500ms -6235ms linear infinite; } .umbrella:nth-child(40) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#167a7a), to(#48acac)); background: linear-gradient(180deg, #167a7a, #48acac); } .umbrella:nth-child(40) .hand { color: #48acac; } .umbrella:nth-child(40) .body { -webkit-animation: rotate 27772ms -28585ms linear infinite; animation: rotate 27772ms -28585ms linear infinite; } .umbrella:nth-child(41) { top: -520px; left: -457px; -webkit-animation: fly 29500ms -9637ms linear infinite; animation: fly 29500ms -9637ms linear infinite; } .umbrella:nth-child(41) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#acbe47), to(#def079)); background: linear-gradient(180deg, #acbe47, #def079); } .umbrella:nth-child(41) .hand { color: #def079; } .umbrella:nth-child(41) .body { -webkit-animation: rotate 25013ms -56000ms linear infinite; animation: rotate 25013ms -56000ms linear infinite; } .umbrella:nth-child(42) { top: -1049px; left: 734px; -webkit-animation: fly 29500ms -22377ms linear infinite; animation: fly 29500ms -22377ms linear infinite; } .umbrella:nth-child(42) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#c43c8e), to(#f66ec0)); background: linear-gradient(180deg, #c43c8e, #f66ec0); } .umbrella:nth-child(42) .hand { color: #f66ec0; } .umbrella:nth-child(42) .body { -webkit-animation: rotate 12855ms -60566ms linear infinite; animation: rotate 12855ms -60566ms linear infinite; } .umbrella:nth-child(43) { top: -83px; left: -910px; -webkit-animation: fly 29500ms -19266ms linear infinite; animation: fly 29500ms -19266ms linear infinite; } .umbrella:nth-child(43) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#8d8a63), to(#bfbc95)); background: linear-gradient(180deg, #8d8a63, #bfbc95); } .umbrella:nth-child(43) .hand { color: #bfbc95; } .umbrella:nth-child(43) .body { -webkit-animation: rotate 13524ms -81129ms linear infinite; animation: rotate 13524ms -81129ms linear infinite; } .umbrella:nth-child(44) { top: -1053px; left: 494px; -webkit-animation: fly 29500ms -9482ms linear infinite; animation: fly 29500ms -9482ms linear infinite; } .umbrella:nth-child(44) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#52595d), to(#848b8f)); background: linear-gradient(180deg, #52595d, #848b8f); } .umbrella:nth-child(44) .hand { color: #848b8f; } .umbrella:nth-child(44) .body { -webkit-animation: rotate 24227ms -93990ms linear infinite; animation: rotate 24227ms -93990ms linear infinite; } .umbrella:nth-child(45) { top: -528px; left: 11px; -webkit-animation: fly 29500ms -5204ms linear infinite; animation: fly 29500ms -5204ms linear infinite; } .umbrella:nth-child(45) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#b47804), to(#e6aa36)); background: linear-gradient(180deg, #b47804, #e6aa36); } .umbrella:nth-child(45) .hand { color: #e6aa36; } .umbrella:nth-child(45) .body { -webkit-animation: rotate 25422ms -57293ms linear infinite; animation: rotate 25422ms -57293ms linear infinite; } .umbrella:nth-child(46) { top: -905px; left: -230px; -webkit-animation: fly 29500ms -11390ms linear infinite; animation: fly 29500ms -11390ms linear infinite; } .umbrella:nth-child(46) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#4a581a), to(#7c8a4c)); background: linear-gradient(180deg, #4a581a, #7c8a4c); } .umbrella:nth-child(46) .hand { color: #7c8a4c; } .umbrella:nth-child(46) .body { -webkit-animation: rotate 19910ms -3891ms linear infinite; animation: rotate 19910ms -3891ms linear infinite; } .umbrella:nth-child(47) { top: 397px; left: 473px; -webkit-animation: fly 29500ms -13531ms linear infinite; animation: fly 29500ms -13531ms linear infinite; } .umbrella:nth-child(47) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#c3211d), to(#f5534f)); background: linear-gradient(180deg, #c3211d, #f5534f); } .umbrella:nth-child(47) .hand { color: #f5534f; } .umbrella:nth-child(47) .body { -webkit-animation: rotate 12675ms -30821ms linear infinite; animation: rotate 12675ms -30821ms linear infinite; } .umbrella:nth-child(48) { top: -229px; left: -227px; -webkit-animation: fly 29500ms -14658ms linear infinite; animation: fly 29500ms -14658ms linear infinite; } .umbrella:nth-child(48) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#bb4399), to(#ed75cb)); background: linear-gradient(180deg, #bb4399, #ed75cb); } .umbrella:nth-child(48) .hand { color: #ed75cb; } .umbrella:nth-child(48) .body { -webkit-animation: rotate 20386ms -92963ms linear infinite; animation: rotate 20386ms -92963ms linear infinite; } .umbrella:nth-child(49) { top: -728px; left: 725px; -webkit-animation: fly 29500ms -4859ms linear infinite; animation: fly 29500ms -4859ms linear infinite; } .umbrella:nth-child(49) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#31062e), to(#633860)); background: linear-gradient(180deg, #31062e, #633860); } .umbrella:nth-child(49) .hand { color: #633860; } .umbrella:nth-child(49) .body { -webkit-animation: rotate 20072ms -38957ms linear infinite; animation: rotate 20072ms -38957ms linear infinite; } .umbrella:nth-child(50) { top: -321px; left: -472px; -webkit-animation: fly 29500ms -15306ms linear infinite; animation: fly 29500ms -15306ms linear infinite; } .umbrella:nth-child(50) .cloth { background: -webkit-gradient(linear, left top, left bottom, from(#863757), to(#b86989)); background: linear-gradient(180deg, #863757, #b86989); } .umbrella:nth-child(50) .hand { color: #b86989; } .umbrella:nth-child(50) .body { -webkit-animation: rotate 25981ms -17004ms linear infinite; animation: rotate 25981ms -17004ms linear infinite; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotateZ(0deg); transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes fly { 0% { -webkit-transform: translateZ(-1200px); transform: translateZ(-1200px); } 100% { -webkit-transform: translateZ(4000px); transform: translateZ(4000px); } } @keyframes fly { 0% { -webkit-transform: translateZ(-1200px); transform: translateZ(-1200px); } 100% { -webkit-transform: translateZ(4000px); transform: translateZ(4000px); } } </style> </head> <body translate="no" > <h1 class="title">Umbrella is gone</h1> <div class="camera -x"> <div class="camera -y"> <div class="camera -z"> <div class="umbrellas"> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> <div class="arm"> <div class="cloth -cloth1"></div> <div class="cloth -cloth2"></div> </div> </div> </div> </div> <div class="umbrella"> <div class="body"> <div class="bones"> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> <div class="bone"></div> </div> <div class="pole"> <div class="hand">J</div> </div> <div class="arms"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0