图片自己随便扣的大家不要见笑！
本例子所用知识参考
http://www.w3school.com.cn/css3/css3_animation.asp
直接上代码 直接复制粘贴就可用
这个是body里面的代码
<body>
<section>
<div class="cloud large"></div>
<div class="cloud small"></div>
<div class="cloud medium"></div>
<div class="boat"></div>
</section>
</body>
样式 代码
<style>
/*船及动画*/
.boat{
position: absolute;
}
.boat{
z-index: 3;
top: 5%;
right: 15%;
background: url(images/1.png) no-repeat no-repeat center;
height: 340px;
width: 383px;
-webkit-animation: boat 10s 1 ;
-moz-animation: boat 10s 1 ;
-o-animation: boat 10s 1 ;
animation: boat 10s 1 ;
}
@-webkit-keyframes boat {
0% {
right: 0%;
}
100% {
right: 15%;
}
}
@-moz-keyframes boat {
0% {
left: 0%;
}
100% {
left: 15%;
}
}
@-o-keyframes boat {
0% {
left: 0%;
}
100% {
left: 15%;
}
}
@keyframes boat{
0% {
left: 0;
}
100% {
left: 15%;
}
}
/*-------- 云以及动画 --------*/
.cloud {
position: absolute;
}
.cloud.small {
z-index: 1;
bottom: 5%;
left: 15%;
background: url(images/2.png) no-repeat no-repeat center;
height: 128px;
width: 161px;
-webkit-animation: cloudSmall 2s infinite alternate ;
-moz-animation: cloudSmall 2s infinite alternate;
-o-animation: cloudSmall 2s infinite alternate;
animation: cloudSmall 2s infinite alternate;
}
.cloud.medium {
z-index: 3;
top: 25%;
left: 30%;
background: url(images/cloudMedium.png) no-repeat no-repeat center;
height: 92px;
width: 159px;
-webkit-animation: cloudMedium 80s infinite;
-moz-animation: cloudMedium 80s infinite;
-o-animation: cloudMedium 80s infinite;
animation: cloudMedium 80s infinite;
}
.cloud.large {
z-index: 2;
top: 5%;
right: 15%;
background: url(images/3.png) no-repeat no-repeat center;
height: 169px;
width: 302px;
-webkit-animation: cloudLarge 105s infinite;
-moz-animation: cloudLarge 105s infinite;
-o-animation: cloudLarge 105s infinite;
animation: cloudLarge 105s infinite;
}
@-webkit-keyframes cloudSmall {
0% {
bottom: 0%;
}
100% {
bottom: 0.5%;
}
}
@-moz-keyframes cloudSmall {
0% {
left: 0%;
}
100% {
left: 0.5%;
}
}
@-o-keyframes cloudSmall {
0% {
left: -5%;
}
100% {
left: 1%;
}
}
@keyframes cloudSmall {
0% {
left: -5%;
}
100% {
left: 1%;
}
}
@-webkit-keyframes cloudMedium {
0% {
left: -8%;
}
100% {
left: 108%;
}
}
@-moz-keyframes cloudMedium {
0% {
left: -8%;
}
100% {
left: 108%;
}
}
@-o-keyframes cloudMedium {
0% {
left: -8%;
}
100% {
left: 108%;
}
}
@keyframes cloudMedium {
0% {
left: -8%;
}
100% {
left: 108%;
}
}
@-webkit-keyframes cloudLarge {
0% {
right: -18%;
}
100% {
right: 118%;
}
}
@-moz-keyframes cloudLarge {
0% {
right: -18%;
}
100% {
right: 118%;
}
}
@-o-keyframes cloudLarge {
0% {
right: -18%;
}
100% {
right: 118%;
}
}
@keyframes cloudLarge {
0% {
right: -18%;
}
100% {
right: 118%;
}
}
body{
background-color:#00F;}
</style>
例子所用到的图片
扫一扫
684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
