图片自己随便扣的大家不要见笑！
本例子所用知识参考
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>
例子所用到的图片
