基于css3小船水面游动动画特效_html/css_WEB-ITnose

基于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