基于css3小船水面游动动画特效，这是一款色彩鲜艳扁平风格的css3动画特效。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div class="land"> <div class="land_01"></div> <div class="land_02"></div> <div class="land_03"></div> <div class="land_04"></div> </div> <div class="ship"> <div class="ship_01"></div> <div class="ship_02"></div> <div class="ship_03"></div> </div>
css代码：
* { padding: 0; margin: 0; } body { position: relative; background: #0cc; overflow: hidden; } .land { height: 100px; width: 100%; position: absolute; top: 270px; background: #afa; } .land_01 { width: 0; height: 0; border-left: 300px solid transparent; border-bottom: 120px solid #afa; position: absolute; left: 0px; top: -120px; } .land_01:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 120px solid #afa; position: absolute; } .land_02 { width: 0; height: 0; border-left: 300px solid transparent; border-bottom: 100px solid #afa; position: absolute; left: 150px; top: -100px; } .land_02:after { content: ""; width: 0; height: 0; border-right: 350px solid transparent; border-bottom: 100px solid #afa; position: absolute; left: 0px; } .land_03 { width: 0; height: 0; border-left: 200px solid transparent; border-bottom: 20px solid #afa; position: absolute; left: 700px; top: -20px; } .land_03:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 20px solid #afa; position: absolute; left: 0px; } .land_04 { width: 0; height: 0; border-left: 200px solid transparent; border-bottom: 50px solid #afa; position: absolute; left: 1000px; top: -50px; } .land_04:after { content: ""; width: 0; height: 0; border-right: 150px solid transparent; border-bottom: 50px solid #afa; position: absolute; left: 0px; } .ship { position: absolute; width: 400px; height: 370px; top: 100px; left: 0%; animation: boat 20s infinite; -webkit-animation: boat 20s infinite; } .ship_01 { width: 0; height: 0; border-left: 150px solid transparent; border-bottom: 300px solid #ff5d89; position: absolute; left: 140px; } .ship_01:before { content: ""; width: 0px; height: 0px; border-left: 80px solid transparent; border-bottom: 180px solid #FF5D89; position: absolute; left: -275px; top: 120px; } .ship_02 { width: 250px; height: 40px; background: #ff5d89; position: absolute; top: 300px; left: 100px; } .ship_02:before, .ship_02:after { content: ""; width: 0; height: 0; border-top: 40px solid #ff5d89; position: absolute; } .ship_02:before { border-left: 40px solid transparent; left: -40px; } .ship_02:after { border-right: 40px solid transparent; right: -40px; } .ship_03 { width: 0; height: 0; border-right: 90px solid transparent; border-bottom: 280px solid #ff5d89; position: absolute; left: 300px; top: 20px; } .ship_03:before { content: ""; width: 0px; height: 0px; border-right: 90px solid transparent; border-bottom: 25px solid #0cc; position: absolute; top: 255px; } @keyframes boat { 0% { left: 0%; } 100% { left: 90%; } } @-webkit-keyframes boat { 0% { left: 0%; } 100% { left: 90%; } }via：http://www.w2bc.com/article/57979
