css让云朵动起来,如何使用CSS3构造一个云朵图形

CSS

语言：

CSSSCSS

确定

body {

background: #ccc;

}

#cloud {

width: 22rem;

height: 8rem;

background: #f2f9fe;

background: -webkit-linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);

background: linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);

border-radius: 100px;

-webkit-animation: Floatingx 3s ease-in-out infinite;

animation: Floatingx 3s ease-in-out infinite;

position: relative;

margin: 120px auto 20px;

}

#cloud:after,

#cloud:before {

content: "";

position: absolute;

background: #f2f9fe;

z-index: -1;

}

#cloud:after {

width: 100px;

height: 100px;

top: -50px;

left: 50px;

border-radius: 100px;

}

#cloud:before {

width: 180px;

height: 180px;

top: -90px;

left: 120px;

border-radius: 200px;

}

.shadow {

width: 350px;

position: absolute;

bottom: -25px;

background: #000;

-webkit-animation: scalex 3s ease-in-out infinite;

animation: scalex 3s ease-in-out infinite;

box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);

}

@-webkit-keyframes Floating {

from {

-moz-transform: translate(0, 0px);

}

65% {

-moz-transform: translate(0, 15px);

}

to {

-moz-transform: translate(0, 0px);

}

}

@keyframes Floating {

from {

-moz-transform: translate(0, 0px);

}

65% {

-moz-transform: translate(0, 15px);

}

to {

-moz-transform: translate(0, 0px);

}

}

@-webkit-keyframes Floatingx {

from {

-webkit-transform: translate(0, 0px);

}

65% {

-webkit-transform: translate(0, 15px);

}

to {

-webkit-transform: translate(0, 0px);

}

}

@-webkit-keyframes scalex {

from {

-webkit-transform: scale(0.9);

}

65% {

-webkit-transform: scale(1);

}

to {

-webkit-transform: scale(0.9);

}

}