纯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