cssjs泡泡飘动特效

CSS/JS泡泡飘动特效

基础概念

CSS/JS泡泡飘动特效是一种通过CSS动画和JavaScript控制实现的视觉效果，通常用于网页或应用中增加动态元素，提升用户体验。这种特效模拟了泡泡从页面底部升起并在空中飘动的自然现象。

优势

视觉吸引力：增加页面的动态效果，吸引用户注意力。
交互性：用户可以与泡泡进行互动，如点击、拖动等。
品牌宣传：可以用于展示品牌标志或宣传语。

类型

简单飘动：泡泡从底部升起，经过一定时间后消失。
交互飘动：用户可以通过鼠标移动或点击影响泡泡的运动轨迹。
动画效果：泡泡可以有不同的形状、颜色和透明度变化。

应用场景

网站首页：作为背景动画，增加页面的趣味性。
游戏界面：用于游戏中的道具或提示信息。
社交媒体：用于发布动态时的装饰效果。

实现方法

以下是一个简单的CSS/JS泡泡飘动特效的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>泡泡飘动特效</title>
    <style>
        .bubble {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            bottom: 0;
            animation: rise 5s linear infinite;
        }
        @keyframes rise {
            0% { transform: translateY(0); }
            100% { transform: translateY(-100vh); }
        }
    </style>
</head>
<body>
    <div class="bubble" style="width: 50px; height: 50px;"></div>
    <div class="bubble" style="width: 30px; height: 30px; left: 50%;"></div>
    <script>
        function createBubble() {
            const bubble = document.createElement('div');
            bubble.classList.add('bubble');
            bubble.style.width = `${Math.random() * 50 + 20}px`;
            bubble.style.height = bubble.style.width;
            bubble.style.left = `${Math.random() * 100}vw`;
            document.body.appendChild(bubble);
            setTimeout(() => bubble.remove(), 5000);
        }
        setInterval(createBubble, 1000);
    </script>
</body>
</html>