CSS\JS实现页面背景气泡logo上浮效果

凉风听雪

已于 2024-08-24 15:24:34 修改

阅读量115

点赞数 2

分类专栏： CSS炫酷使用文章标签： javascript css 前端

于 2024-08-24 11:37:18 首次发布

本文链接：https://blog.csdn.net/p_s_p/article/details/141497240

版权

CSS炫酷使用专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

单容器显示气泡：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubble Logo Animation</title>

</head>
<body>
    <div class="bubble-container">
        <!-- 气泡将会动态添加到这里 -->
    </div>


</body>



<style>
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff; /* 背景颜色 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.bubble-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.bubble {
    position: absolute;
    bottom: -50px; /* 从页面底部开始 */
    width: 100px;
    height: 100px;
    opacity: 0.8;
    animation: floatUp 10s infinite;
}

.bubble img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 气泡上浮动画 */
@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(1.2);
        opacity: 0;
    }
}


</style>

<script>
const bubbleContainer = document.querySelector('.bubble-container');

function createBubble() {
    const bubble = document.createElement('div');
    bubble.className = 'bubble';
    bubble.style.left = `${Math.random() * 100}vw`; // 随机水平位置
    bubble.style.animationDuration = `${5 + Math.random() * 5}s`; // 随机动画时长
    bubble.innerHTML = `<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="Logo">`;

    bubbleContainer.appendChild(bubble);

    // 动画结束后移除气泡
    bubble.addEventListener('animationend', () => {
        bubble.remove();
    });
}

// 定期生成新的气泡
setInterval(createBubble, 1000);


</script>
</html>

全屏显示气泡：


  <div class="one" style="width: 100%;height: 300px;background-color: pink;">

  </div>

    <div class="bubble-container">
        <!-- 气泡将会动态添加到这里 -->
    </div>




    <style>
        .one {
            width: 100%;
            height: 300px;
            background-color: pink;
            z-index: 1;
            position: relative;
        }

        /* 覆盖整个页面的气泡容器 */
        .bubble-container {
            position: fixed; /* 使容器固定在页面上 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* 确保气泡不影响页面其他内容的交互 */
            z-index: 9999; /* 将气泡放在最前面 */
        }

        .bubble {
            position: absolute;
            bottom: -50px;
            width: 75px;
            height: 75px;
            opacity: 0.5;
            animation: floatUp 10s infinite;
        }

        .bubble img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* 气泡上浮动画 */
        @keyframes floatUp {
            0% {
                transform: translateY(0) scale(1);
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100vh) scale(1.2);
                opacity: 0;
            }
        }
    </style>

<script>
const bubbleContainer = document.querySelector('.bubble-container');

function createBubble() {
    const bubble = document.createElement('div');
    bubble.className = 'bubble';
    bubble.style.left = `${Math.random() * 100}vw`; // 随机水平位置
    bubble.style.animationDuration = `${5 + Math.random() * 5}s`; // 随机动画时长
    bubble.innerHTML = `<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="Logo">`;

    bubbleContainer.appendChild(bubble);

    // 动画结束后移除气泡
    bubble.addEventListener('animationend', () => {
        bubble.remove();
    });
}

// 定期生成新的气泡
setInterval(createBubble, 5000);


</script>