本文介绍如何使用 Vue 框架和 CSS 动画来创建一个动态气泡背景效果的登录页面。通过定义多个 li 元素并应用不同的样式和动画属性，实现了气泡从页面底部上升并消失的视觉效果。文章还展示了具体的 CSS 代码片段，包括关键帧动画和列表项的样式设置，以及最外层容器的背景颜色。这是一个展示 CSS 动画魅力的简单实例。
今天是节后上班第一天，早上醒来一睁眼，嗯？啊…？什么…？这是哪？我是谁？上什么班？
然鹅，还是被昨晚特意设置的八个闹钟⏰吵醒，冬天早上起床的难度…想必各位都心有体会 😭，抱着一万个不情愿起床早早地来到了办公室，还是熟悉的环境，还是熟悉的味道。。。
还有，熟悉的任务需求😂。
今天的第一个任务是写个登录页面，老大给了我一个参(chao)考(xi)案例，大家点击链接就能看到。嗯，这个登录页面确实很简洁、大方，尤其是它的气泡背景，第一反应这应该是张动态图片，打开审查元素才发现原来这是用代码写的，一下子激起了宝宝的好奇心，所以也试着写了一个带气泡背景的登录页面，效果如下：
emm…为什么上传的 gif 动态图总是这么小，来补张截图：
(大家可以自行脑补这些背景气泡往上升的画面 😭)
只需一些简单的代码就可以实现这样的效果,
首先我们先定义10个 li 列表标签&#
最低0.47元/天 解锁文章
扫一扫
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
