css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
类别:Web前端 浏览量:1933
时间:2022-03-28 01:01:25 css特效边框流线动画
CSS 动画实现动态气泡背景的方法今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班?
然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 :sob:,抱着一万个不情愿起床早早地来到了办公室,还是熟悉的环境,还是熟悉的味道。。。
还有,熟悉的任务需求:joy:。
今天的第一个任务是写个登录页面,老大给了我一个参(chao)考(xi)案例,大家点击链接就能看到。嗯,这个登录页面确实很简洁、大方,尤其是它的气泡背景,第一反应这应该是张动态图片,打开审查元素才发现原来这是用代码写的,一下子激起了宝宝的好奇心,所以也试着写了一个带气泡背景的登录页面,效果如下:
emm...为什么上传的.jpg" alt="css特效边框流线动画(CSS 动画实现动态气泡背景的方法)" border="0" />
(大家可以自行脑补这些背景气泡往上升的画面 :sob:)
只需一些简单的代码就可以实现这样的效果,
首先我们先定义10个 li 列表标签,我用的是 vue 框架:
<ul class="bg-bubbles"> <li v-for="(item, index) in bubbles" :key="index"></li> </ul>
created() { this.bubbles.length = 10; },
样式是用 less 编写的:
.bg-bubbles { position: absolute; // 使气泡背景充满整个屏幕 top: 0; left: 0; width: 100%; height: 100%; li { position: absolute; // bottom 的设置是为了营造出气泡从页面底部冒出的效果; bottom: -160px; // 默认的气泡大小; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); list-style: none; // 使用自定义动画使气泡渐现、上升和翻滚; animation: square 15s infinite; transition-timing-function: linear; // 分别设置每个气泡不同的位置、大小、透明度和速度,以显得有层次感; &:nth-child(1) { left: 10%; } &:nth-child(2) { left: 20%; width: 90px; height: 90px; animation-delay: 2s; animation-duration: 7s; } &:nth-child(3) { left: 25%; animation-delay: 4s; } &:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 8s; background-color: rgba(255, 255, 255, 0.3); } &:nth-child(5) { left: 70%; } &:nth-child(6) { left: 80%; width: 120px; height: 120px; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } &:nth-child(7) { left: 32%; width: 160px; height: 160px; animation-delay: 2s; } &:nth-child(8) { left: 55%; width: 20px; height: 20px; animation-delay: 4s; animation-duration: 15s; } &:nth-child(9) { left: 25%; width: 10px; height: 10px; animation-delay: 2s; animation-duration: 12s; background-color: rgba(255, 255, 255, 0.3); } &:nth-child(10) { left: 85%; width: 160px; height: 160px; animation-delay: 5s; } } // 自定义 square 动画; @keyframes square { 0% { opacity: 0.5; transform: translateY(0px) rotate(45deg); } 25% { opacity: 0.75; transform: translateY(-400px) rotate(90deg) } 50% { opacity: 1; transform: translateY(-600px) rotate(135deg); } 100% { opacity: 0; transform: translateY(-1000px) rotate(180deg); } } }
至此,一个气泡背景图就完成了。回过头来看,确实不难,但也愈来愈让人感受到 css 动画的魅力和强大 :relaxed:。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- css渐变色动画(详解CSS背景渐变图片transtion过渡效果技巧)
- css3渐变色动画代码(CSS3 实现的动态星空背景)
- css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- css边框设置颜色(CSS 制作带边框背景色透明的消息框)
- css设置背景图片在角落(详解使用CSS固定页面背景图片位置的方法)
- python中输入背景颜色的代码(Python 给屏幕打印信息加上颜色的实现方法)
- html和css制作导航条(使用Html+Css实现简易导航栏功能导航栏遇到鼠标切换背景颜色)
- css背景的属性有哪些(简述CSS中的背景属性background)
- html5图片做背景代码(Html5之webcoekt播放JPEG图片流)
- laravel6后台管理系统(基于laravel-admin 后台 列表标签背景的使用方法)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- css可以控制网页背景图片吗(CSS实现网页背景图片自适应全屏的方法)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- css中background image重复平铺(解决CSS 中box-sizing与background-clip解决背景显示范围的问题)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
热门推荐
- vmwaredeepin安装(vmware虚拟机安装deepin20最全详细过程)
- 什么是jsonp格式
- 用python制作一个简单的小程序(一个可以套路别人的python小程序实例代码)
- 织梦dedecms优化安全设置指南(DeDecms SEO优化经验谈适用于任何网站)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- pythonsvr时序预测(利用Python半自动化生成Nessus报告的方法)
- php array只能放一种类型的数据(浅谈PHP array_search 和 in_array 函数效率问题)
- pandas列设置随机值(Pandas统计重复的列里面的值方法)
- video tv cast怎么用(video下autoplay属性无效的解决方法添加muted属性)
- laravel服务提供者应用场景(Laravel如何创建服务器提供者实例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9