纯CSS实现波浪移动效果的示例

让我来为你详细讲解如何使用纯CSS实现波浪移动效果。

步骤一：HTML结构

首先，我们需要创建HTML结构。本例中，我们需要一个容器元素和两个波浪元素。代码示例如下：

<div class="wave-container">
  <div class="wave"></div>
  <div class="wave"></div>
</div>

步骤二：CSS样式

接下来，我们需要为这些元素添加CSS样式。我们将使用伪元素和transform属性来创建波浪效果。代码示例如下：

.wave-container {
    position: relative;
    width: 100%;
    height: 150px;
    background-color: #fff;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #4c95bd;
}

.wave::before, .wave::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    transform: translateX(-50%);
}

.wave::before {
    left: -100%;
    animation: wave 4s ease-in-out infinite;
}

.wave::after {
    left: 0;
    animation: wave 4s ease-in-out 2s infinite;
}

@keyframes wave {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(-25%) scale(0.8);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

在上面的代码中，我们使用了伪元素(::before和::after)和transform属性来创建波浪效果。其中，伪元素的宽度为200%，高度为100%，利用了圆的边界特性来模拟波浪的形状。transform属性用于移动和缩放波浪的位置和大小。

同时，我们也为波浪元素添加了动画效果，让它们在水平方向上来回移动。动画使用了关键帧@keyframes，并在前50%的时间缩小波浪大小，后50%的时间恢复原大小。这样做的目的是为了让波浪看起来更加自然。

示例说明

下面是两个使用纯CSS实现波浪移动效果的示例说明，希望对你有所帮助。

示例一：将波浪效果应用于卡片背景

在这个示例中，我们将波浪效果应用于卡片的背景，代码如下：

<div class="card">
  <div class="wave-container">
    <div class="wave"></div>
    <div class="wave"></div>
  </div>
  <div class="content">
    <h2>卡片标题</h2>
    <p>这是一段卡片内容。这是一段卡片内容。这是一段卡片内容。</p>
  </div>
</div>

.card {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    text-align: center;
    color: #fff;
}

.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #4c95bd;
}

.wave::before, .wave::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    transform: translateX(-50%);
}

.wave::before {
    left: -100%;
    animation: wave 4s ease-in-out infinite;
}

.wave::after {
    left: 0;
    animation: wave 4s ease-in-out 2s infinite;
}

@keyframes wave {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(-25%) scale(0.8);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

示例二：将波浪效果应用于顶部导航栏

在这个示例中，我们将波浪效果应用于顶部导航栏，让它看起来更加生动有趣，代码如下：

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
  <div class="wave-container">
    <div class="wave"></div>
    <div class="wave"></div>
  </div>
</nav>

.navbar {
    position: relative;
    height: 60px;
    background-color: #4c95bd;
}

ul {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

li {
    margin: 0 20px;
}

a {
    color: #fff;
    text-decoration: none;
}

.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #fff;
}

.wave::before, .wave::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 100%;
    border-radius: 50%;
    background-color: inherit;
    transform: translateX(-50%);
}

.wave::before {
    left: -100%;
    animation: wave 4s ease-in-out infinite;
}

.wave::after {
    left: 0;
    animation: wave 4s ease-in-out 2s infinite;
}

@keyframes wave {
    0% {
        transform: translateX(0) scale(1);
    }
    50% {
        transform: translateX(-25%) scale(0.8);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

在以上示例中，我们通过为波浪的颜色和背景颜色设置不同的值，实现了更丰富多彩的效果。同时，我们也调整了波浪的高度和位置，让它更适应不同的应用场景。