CSS 圆环声波动画

在网页设计中，动画效果可以增加用户体验，让网页更加生动和有趣。其中，CSS 动画是一种简单实用的实现方式。在本文中，我们将学习如何使用 CSS 创建一个圆环声波动画效果。

实现原理

我们的声波动画效果主要通过两个部分来实现：圆环和波纹。

圆环：使用 CSS 的 border 和 border-radius 属性创建一个圆形的元素。
波纹：使用 CSS 的伪元素 ::after 和 animation 属性创建波纹效果。

HTML 结构

首先，我们需要创建一个 HTML 文件，并在其中添加一个带有波纹效果的圆环元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sound Wave Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="circle"></div>
</body>
</html>

CSS 样式

接下来，我们需要为我们的圆环声波动画添加 CSS 样式。

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.circle {
    width: 100px;
    height: 100px;
    border: 3px solid #3498db;
    border-radius: 50%;
    position: relative;
}

.circle::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid #3498db;
    border-radius: 50%;
    animation: pulse 2s infinite linear;
}

@keyframes pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}

在上面的代码中，我们首先将页面的背景颜色设置为浅灰色，然后将圆环设为蓝色，并添加了 3px 的边框和圆角效果。波纹效果通过 ::after 伪元素来实现，设置宽高为 100%，并应用动画 pulse，动画时间为 2s，无限循环。