CSS3 簡易波シミュレーション 私も波、浮き沈み、大きな波もあれば小さな波もあります（ニヤリ）_html/css_WEB-ITnose

私は波です、浮き沈みがあります、大きな波もあれば小さな波もあります（ニヤリ…）

最近ウェブサイトが改訂され、基本的にアニメーションは書かないのですが、一部のウェブサイトはまだ書いていますシンプルなアニメーションが共有されており、非常にシンプルでシンプルです。

原理の簡単な説明

実際は非常に簡単です。アーティストが作成した幅 2400 ピクセルの 3 つの異なる波を使用し、それらを [スプライト画像] に合成します (読み込みと同期を高速化するのに役立ちます)。

素材さえ揃ってしまえば、コンテナを使って3つのdiv背景の波を重ねて、css3のオフセットを使って、もちろん左右、上下に動かすだけなので簡単です。適切な時間と遅延にゆっくりと調整します。

早速、デモのアドレスに行きましょう: http://sandbox.runjs.cn/show/akodn0vt

Wave アニメーション CSS

<style type="text/css">        /* *  author: jasnature *  email : 276227015@qq.com *  last update : 2016-04-21 * */        .index_waves {            background: url("img/index_waves.png  这里放波浪图，图可以去演示地址抠出来") center 0 no-repeat;        }                .wave3 {            height: 427px;            width: 2402px;            background-position: 0 0;        }                .wave2 {            height: 427px;            width: 2402px;            background-position: 0 -427px;        }                .wave1 {            height: 427px;            width: 2402px;            background-position: 0 -854px;        }                @keyframes wave {            0% {                transform: translate(0px, 0px);            }            50% {                transform: translate(-80px, 30px);            }            100% {                transform: translate(160px, -60px);            }        }                @-webkit-keyframes wave {            0% {                transform: translate(0px, 0px);            }            50% {                transform: translate(-80px, 30px);            }            100% {                transform: translate(160px, -60px);            }        }                @-moz-keyframes wave {            0% {                transform: translate(0px, 0px);            }            50% {                transform: translate(-80px, 30px);            }            100% {                transform: translate(160px, -60px);            }        }                .waves {            position: absolute;            bottom: -135px;            height: 527px;            width: 100%;            overflow: hidden;        }                .waves > div {            position: absolute;            left: -180px;            bottom: 0;        }                .waves .wave1,        .waves .wave2,        .waves .wave3 {            animation: wave 5s ease-in-out alternate infinite;        }                .waves .wave2 {            animation-delay: 0.6s;        }                .waves .wave3 {            animation-delay: 1.2s;        }                .waveContent {            position: relative;            background-color: #219df3;            height: 500px;        }                h2 {            position: relative;            display: block;            color: #fff;            font-size: 48px;            font-family: "microsoft yahei";            font-weight: normal;            width: 1100px;            margin: 0 auto;            top: 180px;            z-index: 99;        }    </style>

Wave アニメーション HTML

りー

OK、コードは添付されました。