CSS3做一个气泡的动画效果

最新推荐文章于 2024-05-07 05:45:24 发布
最新推荐文章于 2024-05-07 05:45:24 发布
阅读量5.4k 收藏 88
点赞数 14
文章标签： css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ALLstudydaydayup/article/details/106246291
版权

来学习分享一下用CSS3做一个简单的气泡飘飘的动画效果

1、首先来搭建一个基本HTML结构
html结构
先来个10个div，这也就是我们的泡泡了。

2、接下来进入css样式设置
在这里插入图片描述
设置一下body，并给他一个合适的背景颜色，撑满整个屏幕，然后再来设置一下泡泡的样式了。
在这里插入图片描述
给泡泡个固定定位，方便跑来跑去，预备一个泡泡动画

3、再来就是写个泡泡飘飘的动画了
在这里插入图片描述
我们用固定定位来控制垂直方向的移动，水平方向用transform的translate来控制，大概写三个关键帧，想要复杂写也可多写些。

在这里插入图片描述
现在泡泡已经能动起来了&

最低0.47元/天 解锁文章
ALLstudydaydayup
关注
  • 14
    点赞
  • 踩
  • 88
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js仿照 蚂蚁森林 效果
JAVA5G的专栏
08-19 6628
如图js仿照蚂蚁森林效果 css ** 葫芦籽动画效果 */ /* animation */ .a-swing{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .bottle-fadeIn1{-webkit-animation:.8s ease...
仿支付宝蚂蚁森林水滴浮动效果
热门推荐
yangyong915的专栏
01-09 1万+
可以有多个水滴，可以控制位置，水滴上下浮动。点击水滴产生搜集动画，水滴向树移动并逐渐消失，如图：那么是如何实现的呢，下面我们一步步来分析：1、定义一个继承Relativelayout 的子类作为容器放置多个水滴并在Onlayout()中设置子控件的位置@Override protected void onLayout(boolean changed, int l, int t, int r
【日常记录】【CSS】生成动态气泡小球
呆呆狗
04-09 1240
css 生成动态气泡小球
运动的气泡（css动画）特效
cmx17的博客
07-19 336
特效
2024年前端网页的提示气泡特效实现【简单】，干货整理
最新发布
2401_84411433的博客
05-07 1014
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。按钮的样式，简单通用的居中样式。
CSS实现气泡效果（bubble effect）
Mr.Nice
03-14 2446
示例链接 一、先来看第一种方式（基本）： 1.首先HTML列表用ul li： ul id="bubble">       li>         a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed">Full RSS Fee
仿 支付宝蚂蚁森林中的树 抖一抖小动画
qq_42294411的博客
01-13 539
这个动画的难点是树的元素一定要设置绝对定位,bottom:0,这样改变树的高度的时候树才会向上伸展,而不是根据文档流向下伸展. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
仿蚂蚁森林能量特效
06-21
仿支付宝蚂蚁森林能量特效，以后可能用的到，记录一下
纯CSS3创意气泡动画特效
07-24
在本文中，我们将深入探讨“纯CSS3创意气泡动画特效”这一主题，这是一种利用CSS3的关键帧动画（keyframes）特性来实现的创新设计。这种特效能够为网站添加动态和互动性，提升用户体验，特别适用于儿童网站、社交...
css3创意气泡文字标签布局动画特效
06-11
本项目名为“css3创意气泡文字标签布局动画特效”，它利用了CSS3的关键帧动画（keyframes）属性来创建一个独特的、多彩的气泡文字标签布局，这些气泡大小不一，带有光晕效果，并随机排列。 首先，我们要理解CSS3的...
CSS3 SVG气泡加载动画特效
06-24
总的来说，CSS3 SVG气泡加载动画特效是一个综合运用了现代前端技术的优秀示例，它展示了如何通过CSS3和SVG的结合，创造出既美观又实用的交互式用户体验。对于开发者来说，理解和掌握这些技术，不仅可以提升网页的...
CSS3全屏彩色水泡泡背景特效
06-24
CSS3全屏彩色水泡泡背景特效是一款基于HTML5+CSS3制作全屏的网页悬浮的彩色气泡水泡泡动画特效。
简单好看CSS3按钮点击气泡动画特效.zip
07-11
代码片段： var animateButton = function(e) {   e.preventDefault;   //reset animation   e.target.classList.remove('animate');   e.target.classList.add('animate');   setTimeout(function(){     e.target.classList.remove('animate');   },700); };
CSS3实现的冒泡提示效果
06-12
喜欢 Iphone界面漂亮的冒泡提示效果吗？想把这种效果用在你的网站上更好的提高用户体验吗？ 想的话就下载本特效吧，不过可惜的是它只支持CSS3属性； 请在支持CSS3浏览器下浏览
CSS3气泡动画文字导航菜单代码
06-05
【CSS3气泡动画文字导航菜单代码】是一种利用CSS3技术实现的动态效果，它为网页的导航菜单赋予了生动的视觉表现。在这款设计中，当用户将鼠标悬停在文字导航链接上时，相应的图标气泡会从文字下方弹出，呈现向上的...
纯CSS3气泡加载图标动画特效
06-24
【纯CSS3气泡加载图标动画特效】是一种利用现代浏览器对CSS3特性的支持，创建出的富有动态感和视觉吸引力的加载等待效果。在网页设计中，这种加载动画不仅能够提升用户体验，还能在数据加载期间提供一种有趣的交互...
纯CSS3冒泡动画按钮实现教程
weixin_34274029的博客
09-09 327
这款CSS3动画按钮非常的有创意，鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色，而是出现很酷的冒泡动画。这么惊艳的CSS3动画按钮，这篇文章主要将按钮实现的过程和代码分享给大家，希望能给在学习CSS3的同学带来实质性的帮助。可以下来看看在线演示效果： 在线演示        源码下载 接下来我们来讲解一下这款CSS3气泡动画的按钮实现过程，主要由HTML代码和CSS代码组成。 ...
纯CSS打气球爆炸js特效
ICode联盟
07-11 380
下载地址纯CSS打气球爆炸特效，没有使用任何JavaScript代码，可以打破气球的网页特效。dd:
css文字气泡
06-02
要制作 CSS 文字气泡，可以参考以下步骤： 1. 创建一个带有背景颜色的 div 元素，用于容纳气泡中的文本内容。 2. 使用 CSS 的伪元素 ::before 或 ::after 创建一个三角形，作为气泡的尾部。 3. 设置 div 元素和伪元素的样式，例如边框、圆角、位置等。 4. 使用 CSS 的 position 和 z-index 属性对气泡进行定位和层级控制。 以下是一个简单的 CSS 文字气泡示例代码： ```html <div class="bubble">这是一个气泡</div> ``` ```css .bubble { position: relative; display: inline-block; padding: 10px; background-color: #f7f7f7; border-radius: 10px; } .bubble::before { content: ""; position: absolute; bottom: -10px; left: 10px; border-width: 10px; border-style: solid; border-color: transparent transparent #f7f7f7 transparent; } ``` 通过上述代码，可以创建一个带有尾部三角形的 CSS 文字气泡。你可以根据需要修改样式和位置，并添加动画效果等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值