使用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>
  1. 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动画上下移动,并向右平移以模拟连续的波浪效果。你可以根据需要调整颜色、尺寸和动画速度来定制这个特效。

posted @   王铁柱6  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示