网页展示水波纹效果 css水波效果

谁借莪１个温暖的怀抱￠ 2024-04-19 10:23 61阅读 0赞

# 网页展示水波纹效果 #

## 预览 ##

![预览][20190917110227538.gif]

## 思路 ##

在页面底部展示多张水波的图片，然后让每张水波以不同的方向和速度进行移动，并给不同的水波设置不同的透明度。

## 代码 ##

**HTML** `index.html`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>WaterWaveAnimation</title>
    </head>
    <body>
        <section>
            <div class="wave wave1"></div>
            <div class="wave wave2"></div>
            <div class="wave wave3"></div>
            <div class="wave wave4"></div>
        </section>
    </body>
    </html>

**CSS** `style.css`

* { 
        margin: 0;
        padding: 0;
    }
    
    section { 
        position: relative;
        width: 100%;
        height: 100vh;
        background: #3586ff;
        overflow: hidden;
    }
    
    section .wave { 
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(wave.png);
        background-size: 1000px 100px;
    }
    
    section .wave.wave1 { 
        animation: animate1 20s linear infinite;
        z-index: 1000;
        opacity: 1;
        animation-delay: 0s;
        bottom: 0;
    }
    
    section .wave.wave2 { 
        animation: animate2 15s linear infinite;
        z-index: 999;
        opacity: 0.5;
        animation-delay: -5s;
        bottom: 10px;
    }
    
    section .wave.wave3 { 
        animation: animate1 10s linear infinite;
        z-index: 998;
        opacity: 0.2;
        animation-delay: -7s;
        bottom: 15px;
    }
    
    section .wave.wave4 { 
        animation: animate2 2s linear infinite;
        z-index: 997;
        opacity: 0.71;
        animation-delay: -5s;
        bottom: 20px;
    }
        
    @keyframes animate1 { 
        0% { 
            background-position-x: 0;
        }
        100% { 
            background-position-x: 1000px;
        }
    }
    
    @keyframes animate2 { 
        0% { 
            background-position-x: 0;
        }
        100% { 
            background-position-x: -1000px;
        }
    }

图片资源请到Github中下载

## github地址 ##

> [https://github.com/djzhao627/WaterWaveAnimation-CSS][https_github.com_djzhao627_WaterWaveAnimation-CSS]

参考地址:

> [Youtube][]

[20190917110227538.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5ca21bf2f73b4bbeaa943f2cd43b48bb.gif
[https_github.com_djzhao627_WaterWaveAnimation-CSS]: https://github.com/djzhao627/WaterWaveAnimation-CSS
[Youtube]: https://www.youtube.com/watch?v=MMNEEdGa5eE