使用css实现水波加载动画效果

使用 CSS 实现水波加载动画效果是一种很酷炫的效果，可以增加网站的用户体验。以下是实现水波加载动画的完整攻略：

1. 准备工作

首先，在 HTML 文件中创建一个 div 元素，并给它设一个 id 如「wave-bg」，用于装载动画。

<div id="wave-bg"></div>

2. 使用 CSS 绘制水波纹

利用伪类 ::before 和 ::after，通过绘制半圆的方式表现出水波纹的效果。代码如下：

#wave-bg::after{
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 60px;
    opacity: 0.6;
    background-color: #fff;
    border-radius: 100%;
}

#wave-bg::before{
    content:"";
    position: absolute;
    top: -5px;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 60px;
    background-color:#fff;
    opacity:.3;
    border-radius: 100%;
    animation: animateWave 1s linear infinite;
}

@keyframes animateWave{
    0%{
        transform: translateX(0);        
    }
    100%{
        transform: translateX(100%);   
    }
}

3. 创建动画

在上面的代码块中，我们为 wave-bg 添加了一个 before 元素，它将被用作动画元素。关键的一步是通过 keyframes 动画标签，将水平方向 translateX() 应用于 before 元素，以使其在元素内侧循环滚动。此外，通过 background-color、opacity、top、height 等 CSS 属性调整水波的颜色、透明度、位置和大小。

示例说明

示例一

下面是一个以紫色为主调的水波加载动画的代码示例：

#wave-bg::after{
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 60px;
    opacity: 0.6;
    background-color: #7c53b8;
    border-radius: 100%;
}

#wave-bg::before{
    content:"";
    position: absolute;
    top: -5px;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 60px;
    background-color:#fff;
    opacity:.3;
    border-radius: 100%;
    animation: animateWave 1s linear infinite;
}

@keyframes animateWave{
    0%{
        transform: translateX(0);        
    }
    100%{
        transform: translateX(100%);   
    }
}

示例二

下面是一个以蓝色为主调的水波加载动画的代码示例：

#wave-bg::after{
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 60px;
    opacity: 0.6;
    background-color: #00acee;
    border-radius: 100%;
}

#wave-bg::before{
    content:"";
    position: absolute;
    top: -5px;
    left: -100%;
    z-index: -1;
    width: 100%;
    height: 60px;
    background-color:#fff;
    opacity:.3;
    border-radius: 100%;
    animation: animateWave 1s linear infinite;
}

@keyframes animateWave{
    0%{
        transform: translateX(0);        
    }
    100%{
        transform: translateX(100%);   
    }
}

以上就是使用 CSS 实现水波加载动画效果的完整攻略，希望对你有所帮助。