请使用CSS3制作一个瀑布的动画

制作一个瀑布的动画可以使用多种技术，但在这里，我们将使用 CSS3 的关键帧动画 (@keyframes) 和一些基本的 HTML 结构来模拟瀑布效果。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="waterfall">
        <div class="water"></div>
        <div class="water"></div>
        <div class="water"></div>
        <!-- 更多的 .water 元素可以增加瀑布的密集度 -->
    </div>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #333;
    overflow: hidden; /* 防止滚动 */
}

.waterfall {
    position: relative;
    width: 10px; /* 瀑布的宽度 */
    height: 100vh; /* 瀑布的高度 */
}

.water {
    position: absolute;
    width: 10px; /* 水滴的宽度 */
    height: 100px; /* 水滴的高度 */
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.3) 100%); /* 水滴的颜色和透明度 */
    border-radius: 50px; /* 使水滴呈圆形 */
    animation: flow 2s linear infinite; /* 应用动画 */
}

.water:nth-child(2) { animation-delay: 0.5s; } /* 延迟第二个水滴的动画开始时间 */
.water:nth-child(3) { animation-delay: 1s; }  /* 延迟第三个水滴的动画开始时间 */
/* 可以为更多的 .water 元素添加不同的延迟时间，以增加变化 */

@keyframes flow {
    0% { top: -100px; opacity: 0; } /* 动画开始时，水滴在瀑布顶部且不可见 */
    20% { opacity: 1; } /* 水滴逐渐变为可见 */
    80% { opacity: 1; } /* 水滴保持可见状态 */
    100% { top: 100vh; opacity: 0; } /* 动画结束时，水滴到达瀑布底部且逐渐变为不可见 */
}

这个示例使用 CSS3 的关键帧动画来模拟水滴从瀑布顶部落下到底部的效果。你可以通过调整 .water 元素的数量、大小、颜色和动画参数来自定义瀑布的外观和行为。

posted @ 2025-01-04 10:26  王铁柱6  阅读(43)  评论(0)    收藏  举报