运行效果
html
CSS3 Cloud Animations By Montana Flynn
css
html, body {
margin: 0;
height: 100%
}
.sky {
height: 480px;
background: #007fd5;
position: relative;
overflow: hidden;
-webkit-animation: sky_background 50s ease-out infinite;
-moz-animation: sky_background 50s ease-out infinite;
-o-animation: sky_background 50s ease-out infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.moon {
background: url("/wFXd68N.png");
position: absolute;
left: 0;
height: 300%;
width: 300%;
-webkit-animation: moon 50s linear infinite;
-moz-animation: moon 50s linear infinite;
-o-animation: moon 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_one {
background: url("/stars/PNG_Clouds/zc06.png?filename=./zc06.png&w0=800&h0s=289&imgType=3&h1=50&w1=140");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_one 50s linear infinite;
-moz-animation: cloud_one 50s linear infinite;
-o-animation: cloud_one 50s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_two {
background: url("/wp-content/uploads//02/clouds-transparent-background-2.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_two 75s linear infinite;
-moz-animation: cloud_two 75s linear infinite;
-o-animation: cloud_two 75s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
.clouds_three {
background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
-webkit-animation: cloud_three 100s linear infinite;
-moz-animation: cloud_three 100s linear infinite;
-o-animation: cloud_three 100s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0)
}
@-webkit-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-webkit-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-webkit-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes sky_background {
0% {
background: #007fd5;
color: #007fd5
}
50% {
background: #000;
color: #a3d9ff
}
100% {
background: #007fd5;
color: #007fd5
}
}
@-moz-keyframes moon {
0% {
opacity: 0;
left: -200% -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left: 0% bottom: 250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom: 500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_two {
0% {
left: 0
}
100% {
left: -200%
}
}
@-moz-keyframes cloud_three {
0% {
left: 0
}
100% {
left: -200%
}
}
以上就是CSS3 实现飘动的云朵动画的详细内容，更多关于CSS3 飘动的云的资料请关注脚本之家其它相关文章！
