css3云彩飘动,用纯CSS3构造的云彩漂浮动画

CSS

语言：

CSSSCSS

确定

body {

background: -webkit-linear-gradient(#add8e6, #ffffff);

background: -o-linear-gradient(#add8e6, #ffffff);

background: -moz-linear-gradient(#add8e6, #ffffff);

background: linear-gradient(#add8e6, #ffffff);

overflow: hidden;

min-height: 500px;

}

div {

position: absolute;

top: 0px;

width: 250px;

height: 200px;

background: -webkit-linear-gradient(#ffffff, #808080);

background: -o-linear-gradient(#ffffff, #808080);

background: -moz-linear-gradient(#ffffff, #808080);

background: linear-gradient(#ffffff, #808080);

border-radius: 100%;

opacity: 0;

filter: blur(20px);

-webkit-filter: blur(20px);

}

div::before,

div::after {

position: relative;

width: 150px;

height: 100px;

content: " ";

display: block;

left: -80px;

top: 100px;

border-radius: 100%;

background: -webkit-linear-gradient(#ffffff, #808080);

background: -o-linear-gradient(#ffffff, #808080);

background: -moz-linear-gradient(#ffffff, #808080);

background: linear-gradient(#ffffff, #808080);

}

div::after {

left: 200px;

height: 80px;

top: -50px;

}

div:nth-child(1) {

animation: moving 31s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 31s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 175px;

top: 20px;

}

div:nth-child(2) {

animation: moving 25s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 25s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 100px;

top: 20px;

}

div:nth-child(3) {

animation: moving 28s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 28s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 150px;

top: 130px;

}

div:nth-child(4) {

animation: moving 20s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 20s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 200px;

top: 100px;

}

div:nth-child(5) {

animation: moving 27s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 27s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 125px;

top: 50px;

}

div:nth-child(6) {

animation: moving 22s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 22s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 150px;

top: 50px;

}

div:nth-child(7) {

animation: moving 28s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 28s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 225px;

top: 75px;

}

div:nth-child(8) {

animation: moving 30s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 30s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 505px;

top: 60px;

}

div:nth-child(9) {

animation: moving 25s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 25s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 375px;

top: 140px;

}

div:nth-child(10) {

animation: moving 23s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 23s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 525px;

top: 70px;

}

div:nth-child(11) {

animation: moving 22s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 22s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 375px;

top: 50px;

}

div:nth-child(12) {

animation: moving 25s;

animation-iteration-coint: infinite;

animation-timing-function: linear;

-webkit-animation: moving 25s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

left: 275px;

top: 60px;

}

@-webkit-keyframes moving {

0% {

margin-left: 0%;

opacity: 0;

}

10% {

opacity: 1;

}

100% {

margin-left: 100%;

}

}

@keyframes moving {

0% {

margin-left: 0%;

opacity: 0;

}

10% {

opacity: 1;

}

100% {

margin-left: 100%;

}

}