【html+css】动态气泡/气球页面的实现

于 2024-04-26 12:59:35 发布
阅读量281 收藏
点赞数 1
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kill_kill_/article/details/138215449
版权

页面效果的丰富实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            min-height: 100vh;
            background: #0c192c;
        }

        .container{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .bubbles{
            display: flex;
        }

        .bubbles span{
            width: 30px;
            height: 30px;
            background-color: #4fc3dc;
            margin: 0 4px;
            border-radius: 50%;
            box-shadow: 0 0 0 10px #4fc3dc44,
            0 0 50px #4fc3dc,
            0 0 100px #4fc3dc;
            animation: animate calc(120s / var(--i) )linear infinite;
        }

        .bubbles span:nth-child(even){
            background-color: #ff2d75;
            box-shadow: 0 0 0 10px #4fc3dc44,
            0 0 50px #4fc3dc,
            0 0 100px #4fc3dc;
        }

        @keyframes animate {
            0%{
                transform: translateY(100vh) scale(0);
            }
            100%{
                transform: translateY(-10vh) scale(1);
            }
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="bubbles">
            <span style="--i:07;"></span>
            <span style="--i:16;"></span>
            <span style="--i:19;"></span>
            <span style="--i:08;"></span>
            <span style="--i:12;"></span>
            <span style="--i:01;"></span>
            <span style="--i:21;"></span>
            <span style="--i:17;"></span>
            <span style="--i:13;"></span>
            <span style="--i:03;"></span>
            <span style="--i:22;"></span>
            <span style="--i:24;"></span>
            <span style="--i:25;"></span>
            <span style="--i:11;"></span>
            <span style="--i:04;"></span>
            <span style="--i:27;"></span>
            <span style="--i:05;"></span>
            <span style="--i:14;"></span>
            <span style="--i:26;"></span>
            <span style="--i:09;"></span>
            <span style="--i:10;"></span>
            <span style="--i:06;"></span>
            <span style="--i:28;"></span>
            <span style="--i:15;"></span>
            <span style="--i:32;"></span>
            <span style="--i:29;"></span>
            <span style="--i:31;"></span>
            <span style="--i:36;"></span>
            <span style="--i:38;"></span>
            <span style="--i:37;"></span>
            <span style="--i:33;"></span>
            <span style="--i:34;"></span>
            <span style="--i:39;"></span>
            <span style="--i:35;"></span>
            <span style="--i:13;"></span>
            <span style="--i:18;"></span>
            <span style="--i:01;"></span>
            <span style="--i:20;"></span>
            <span style="--i:40;"></span>
            <span style="--i:41;"></span>
            <span style="--i:42;"></span>
            <span style="--i:43;"></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
</html>

是个码盲
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html5+css3+js动态气泡背景用户登录页面模板
04-10
html5+css3+js动态气泡背景用户登录页面模板，适用于个性化的网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
HTML5 Canvas气泡背景特效
06-24
HTML5 Canvas气泡背景特效是一款带渐变效果的气泡动画背景效果，并且背景颜色能在4种颜色间平滑过渡转换。
纯CSS实现气泡效果
dqfkkll的博客
11-23 3973
纯css实现一个气泡 HTML <div id="bubble" class="bubble" style="background-color: rgb(42, 209, 172);"><i style="width: 0px;height: 0px;color: rgb(42, 209, 172);border-width: 14px 15px 8px 0px;border-style: solid;border-color: currentcolor transparent trans
CSS气泡效果
学习笔记
12-06 711
无标题文档 #talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #tal
气泡浮动背景特效 html+css
热门推荐
你好呀，很高兴你在看这里~
02-04 1万+
先看效果： 实现： 添加标签底层盒子，再直接暴力添加10个气泡标签： <div class="kuang"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div>
❤️创意网页：萌翻少女心的发光果冻泡泡 - 使用Canvas绘制可爱动态泡泡效果
VLOKL的博客
07-29 242
❤️创意网页：萌翻少女心的发光果冻泡泡 - 使用Canvas绘制可爱动态泡泡效果
html动态气泡原理,css实现动态气泡背景.html
weixin_35717941的博客
06-05 408
Document* {margin: 0;padding: 0;}.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;background: linear-gradient(to bottom right, #50A3A2, #53E3A6);}li {position: absolute...
html+css制作运动气泡小动画
weixin_65376296的博客
07-14 551
运动气泡
html+css+js简单的登录页面
04-10
html+css+js简单的登录页面，适用于网页设计登录页面的个性化设计。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更...
HTML5+CSS3气泡式图标菜单特效特效代码
03-20
1. **选择器**：CSS3引入了更强大的选择器，如伪类选择器`:hover`，使得我们可以仅在鼠标悬停在特定元素上时改变其样式，比如在这里可以实现气泡图标的高亮效果。 2. **转换（Transforms）**：通过`transform`属性...
HTML5圆形气泡背景动画特效
06-24
HTML5圆形气泡背景动画特效是一款基于HTML5 Canvas实现的气泡背景动画下载。
HTML5 Canvas气泡背景特效特效代码
03-20
HTML5 Canvas气泡背景特效是一款带渐变效果的气泡动画背景效果，并且背景颜色能在4种颜色间平滑过渡转换。、
HTML5热气球飞行小游戏代码
07-24
HTML5热气球飞行小游戏代码是一款基于HTML5 Canvas实现的热气球低空飞行穿过树木游戏源代码。
原生js页面上漂浮的气球动画效果
09-13
原生js页面上漂浮的气球动画效果
css3空中飘浮的气球动画特效特效代码
03-20
css3空中飘浮的气球动画特效是一款基于CSS3实现的气球漂浮效果代码。
Html+css制作静态官网页面.zip
最新发布
06-03
Html+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml+css制作静态官网页面.zipHtml...
html5+css3气泡组件的实现
09-28
本文是html5+css3系列教程的第一篇，给大家讲述html5+css3实现气泡组件，讲解的十分的详细，这里推荐给大家，希望对大家能有所帮助
html图片像气球飘动动画,css3气球动画
weixin_36185970的博客
06-04 516
body {font-family:'Wendy One',sans-serif;}span {text-transform:uppercase;}.container {width:800px;height:420px;padding:10px;margin:0 auto;background:whitesmoke;position:relative;}.balloon {width:738px...
用HTML+css实现华为商城注册页面
04-17
好的，我可以回答这个问题。华为商城注册页面的HTML和CSS实现，可以通过以下步骤进行： 1. 首先创建一个HTML文件，可以命名为register.html。在文件中添加页面的基本结构，包括头部（head）、页面主体（body）等。 2. 在页面主体中，添加注册表单（form）元素。可以设置表单的属性，如action、method等。 3. 在注册表单中，添加输入框（input）元素，用于输入用户的信息，如用户名、密码、邮箱等。可以设置输入框的类型（type）、名称（name）、方式（required）等属性。 4. 添加提交按钮（button）元素，用于提交用户的注册信息。 5. 在HTML文件中，添加样式表（style）元素，用于设置页面的样式。可以使用CSS样式属性，如颜色（color）、字体（font）、边框（border）等，来美化页面。 6. 最后，测试页面是否正常运行，可以在网页浏览器中打开HTML文件，查看注册页面是否显示正常。 希望以上步骤对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值