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

最新推荐文章于 2024-05-14 20:38:31 发布

一碗单炒饭

最新推荐文章于 2024-05-14 20:38:31 发布

阅读量3.2k

点赞数 1

分类专栏： Web前端 HTML 文章标签： HTML CSS Animation

本文链接：https://blog.csdn.net/djzhao627/article/details/100919625

版权

Web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

网页展示水波纹效果

预览

思路

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

代码

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

参考地址:

Youtube

一碗单炒饭

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
网页展示水波纹效果 css水波效果

网页展示水波纹效果预览思路在页面底部展示多张水波的图片，然后让每张水波以不同的方向和速度进行移动，并给不同的水波设置不同的透明度。代码HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...
复制链接

扫一扫