纯css实现多彩雨伞飞舞动画效果-html代码-BFW代码库

代码语言：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: f.........完整代码请登录后点击上方下载按钮下载查看