CSS

语言：

CSSSCSS

确定

html,

body {

background: #333;

width: 100%;

height: 100%;

display: flex;

display: -webkit-flex;

display: -moz-flex;

display: -o-flex;

display: -ms-flex;

justify-content: center;

-o-justify-content: center;

-ms-justify-content: center;

-webkit-justify-content: center;

-moz-justify-content: center;

align-items: center;

-moz-align-items: center;

-o-align-items: center;

-webkit-align-items: center;

-moz-align-items: center;

}

.cable {

position: absolute;

top: 35%;

left: 50%;

width: 2px;

height: 110px;

border-radius: 25%;

background: #fbd286;

}

.cable-2 {

left: calc(50% - 30px);

}

.cable-3 {

left: calc(50% + 30px);

}

.cable-4 {

left: calc(50% - 60px);

}

.cable-5 {

left: calc(50% + 60px);

}

.cable-6 {

left: calc(50% - 90px);

}

.cable-7 {

left: calc(50% + 90px);

}

.leaf-1 {

position: absolute;

width: 20px;

height: 20px;

border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-2 {

position: absolute;

top: 25px;

left: -18px;

width: 20px;

height: 20px;

border-bottom-left-radius: 30px;

border-top-right-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-3 {

position: absolute;

top: 50px;

width: 20px;

height: 20px;

border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-4 {

position: absolute;

top: 75px;

left: -18px;

width: 20px;

height: 20px;

border-bottom-left-radius: 30px;

border-top-right-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

@-moz-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

}

@-webkit-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

}

@-o-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

}

@keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

}