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

在线预览    源码下载