CSS3 波浪簡單模擬--我是波浪，我有起伏，有大波與小波（壞笑中...）

時間 2019-12-05

標籤 css3 css 波浪簡單模擬起伏小波欄目 CSS 简体版

原文原文鏈接

我是波浪，我有起伏，我有大波與小波（壞笑中...）

　　最近改版網站，通常也不會去寫動畫，可是有些網站仍是須要的，故拿出一個較簡單的動畫出來分享，很簡單很簡單。css

原理簡單闡述

　　其實很簡單，使用一張美工作好了的2400px寬度的3個不一樣起伏的波浪，而後本身合成爲一張【精靈圖片】（有助於一塊兒加速加載和同時加載）html

有了素材就好辦了，使用一個容器把3個div背景的波浪堆在一塊兒，而後使用css3的偏移進行移動，固然左右和上下都要，而後慢慢調整爲一個適合的時間和延遲。css3

廢話很少說，先上演示地址：http://sandbox.runjs.cn/show/akodn0vtweb

波浪動畫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>

波浪動畫HTML

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>我是波浪，我有起伏，我有大波與小波（壞笑中...）</title>
    </head>

    

    <body>
        <div class="waveContent">
            <h2>我是波浪，我有起伏，我有大波與小波（壞笑中...）</h2>
            <div class="waves">
                <div class="index_waves wave1">

                </div>
                <div class="index_waves wave2">

                </div>
                <div class="index_waves wave3">

                </div>
            </div>
        </div>

    </body>

</html>