使用css画个动态的泳池特效

创建一个动态的泳池特效涉及多个CSS属性的组合，包括渐变、动画和可能的transform效果。以下是一个简单的示例，展示了如何使用CSS来制作一个看起来像是水波荡漾的泳池特效：

1. HTML结构：

<div class="pool">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
</div>

2. CSS样式：

.pool {
    position: relative;
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, #0083ff, #004dff);
    overflow: hidden;
}

.wave {
    position: absolute;
    bottom: -50px; /* 初始位置在水面下 */
    width: 200%; /* 使波浪能够跨越整个泳池并循环 */
    height: 100px;
    background: repeating-linear-gradient(-45deg, #0083ff, #0083ff 30px, #004dff 30px, #004dff 60px);
    animation: wave-animation 4s linear infinite;
    transform: translateX(-50%); /* 居中波浪 */
}

.wave:nth-child(1) {
    animation-duration: 5s;
}

.wave:nth-child(2) {
    animation-duration: 4.5s;
}

.wave:nth-child(3) {
    animation-duration: 4s;
}

.wave:nth-child(4) {
    animation-duration: 3.5s;
}

.wave:nth-child(5) {
    animation-duration: 3s;
}

@keyframes wave-animation {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-30px); /* 波浪上升 */
    }
    100% {
        transform: translateX(-50% + 100%) translateY(0); /* 波浪向右移动并复位 */
    }
}

这个示例创建了一个简单的泳池，其中有多个重叠的波浪元素。每个波浪元素都有一个不同的动画持续时间，这会产生一种更自然、更随机的效果。波浪通过@keyframes动画上下移动，并向右平移以模拟连续的波浪效果。你可以根据需要调整颜色、尺寸和动画速度来定制这个特效。