气泡浮动背景特效 html+css

最新推荐文章于 2025-08-23 13:43:51 发布

原创

最新推荐文章于 2025-08-23 13:43:51 发布 · 1.2w 阅读

194 ·

CC 4.0 BY-SA版权

文章标签：

#气泡背景 #html #css

先看效果：

在这里插入图片描述
更长看视频

实现：

添加标签底层盒子，再直接暴力添加10个气泡标签：

 <div class="kuang">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

添加底层盒子样式，宽高等：

.kuang{
   
   
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
            background-image: