图片自己随便扣的大家不要见笑！
本例子所用知识参考
http://www.Vevb.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>
例子所用到的图片
新闻热点
疑难解答
