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

凉风听雪

已于 2024-08-26 15:50:25 修改

阅读量966

点赞数 2

CC 4.0 BY-SA版权

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

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

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/141497240

效果图：

单容器显示气泡：

<!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; /* 从页面底部开始 */