CSS炫酷气泡漂浮效果

最新推荐文章于 2024-07-23 16:14:20 发布

A-Select °

最新推荐文章于 2024-07-23 16:14:20 发布

阅读量3.2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45959504/article/details/105866804

版权

这篇博客展示了如何使用CSS创建一款炫酷的气泡动态漂浮效果，通过CSS代码实现图形的动画展示，为网页增加趣味性。

摘要由CSDN通过智能技术生成

效果图（动态）：
在这里插入图片描述
CSS

    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background: #9b59b6;
        }

        .bubbles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
            top: 0;
            left: 0;
        }

        .bubble {
            position: absolute;
            bottom: 0;

            background: #f1f1f1;
            border-radius: 50%;
            opacity: 0.5;
            animation: flying 10s infinite ease-in;
        }

        .bubble:nth-child(1) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 8s;