html 气泡动画效果,CSS 动画实现动态气泡背景的方法
今天是节后上班第一天,早上醒来一睁眼,嗯?啊...?什么...?这是哪?我是谁?上什么班?
然鹅,还是被昨晚特意设置的八个闹钟:alarm_clock:吵醒,冬天早上起床的难度...想必各位都心有体会 :sob:,抱着一万个不情愿起床早早地来到了办公室,还是熟悉的环境,还是熟悉的味道。。。
还有,熟悉的任务需求:joy:。
今天的第一个任务是写个登录页面,老大给了我一个参(chao)考(xi)案例,大家点击链接就能看到。嗯,这个登录页面确实很简洁、大方,尤其是它的气泡背景,第一反应这应该是张动态图片,打开审查元素才发现原来这是用代码写的,一下子激起了宝宝的好奇心,所以也试着写了一个带气泡背景的登录页面,效果如下:
emm...为什么上传的 gif 动态图总是这么小,来补张截图:
(大家可以自行脑补这些背景气泡往上升的画面 :sob:)
只需一些简单的代码就可以实现这样的效果,
首先我们先定义10个 li 列表标签,我用的是 vue 框架:
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:。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html 气泡动画效果,CSS 动画实现动态气泡背景的方法相关推荐
- html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究 损失最大 css3意义: CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
- 转场动画:动画效果 css 动画 animate.css
实现动画的方式 <template><button @click="show = !show">改变</button><!-- 1..cs ...
- css圆点图片呼吸动画效果,css动画实现呼吸圆
圆动画 .content{ width: 300px; height: 400px; background-color: #333; margin: 0 auto; } div{ box-sizing ...
- html设定元素动画执行,CSS动画 _Animation 教程_W3cplus
本文是为帮助您入门和熟悉CSS动画而编写的,使用它们来为您带来基于Web的接口以及为艺术带来生命.虽然W3C的CSS动画规范仍在修订中,但是如今它已经有大量的内容可以供我们使用了. 对我而言,CSS动 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
- php动画效果,自定义动画效果自定义动画效果
摘要: jQuery的动画效果--自定义动画 jQuery的动画效果--自定义动画 div{width: 200px;height: 200px;background:blue;position ...
- Python之数据分析(动画效果、animation模块、气泡动画)
文章目录 1.动画效果 2.原理分析 3.动画源码 本篇文章其实与数据分析没有太大关系,因为是涉及到数据分析的数据可视化方面的内容,因此也必须要学习.主要内容是如何制作一个气泡动画效果,当然也是使用m ...
- html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...
- html和css动画效果,css过渡和css动画的区别是什么?
CSS3中出现很多新的特性,其中比较好玩的3D操作就是:过渡和动画效果.那么css过渡和css动画的区别是什么?下面本篇文章就来给大家介绍一下CSS中过渡和动画的区别,希望对大家有所帮助. css过渡 ...
最新文章
- linux mysql删除root_Linux下误删MySQL的root用户解决方法
- GRDB使用SQLite的WAL模式
- e语言怎么连接mysql_大佬们E语言连接MYSQL输出中文乱码怎么破
- 设计模式:单例模式之懒汉式
- NPM:nodejs官方包管理工具的简介、安装、使用方法之详细攻略
- django中的Ajax文件上传
- hadoop--常见错误及解决方法
- 111_Power Pivot 24小时维度:累计、同比、环比相关
- 基础的面试知识,成就面试宝典
- Ionic系列——使用ng-cordova插件
- 快速从入门到精通!mysql删除语句姓李的语句
- ubuntu adduser
- 安装新版xampp后apache无法启动提示:Apache Service detected with wrong path解决方案
- 解决办法:E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)
- 计算机校园网网络系统设计方案,计算机网络课程设计-XX大学校园网网络设计方案.doc...
- 服务器系统启用flash,如何在Windows Server 2016中启用Adobe Flash Player
- linux系统homeinode,ubuntu14.04 64位安装H3C iNode客户端
- 如何实现从外部APP直接跳转微信小程序的解决方案
- 鼠标不能动怎么选择计算机,鼠标动不了怎么办 电脑鼠标不动了按什么键
- Android人脸识别活体检测开发入门--基于虹软免费SDK实现
热门文章
- MyBatisPlus 开启事务并交由 Springboot 管理
- 金融科技B端市场群雄争霸 PATH四家各出奇招
- 你看到的都是错的!——虚拟化技术的真相
- 网页功能升华必备播放器
- PADS导入【ORCAD原理图文件】【导入ORCAD16.3原理图】 【layout如何进行“ECO对比更新”】【打开文件出错:*因为当前设计处于默认层模式下........】
- (转载)小米9开发者选项在哪里怎么打开
- Reference 类
- 大华摄像头视频接入(一)
- 会员卡应用管理系统源码 支持收银+积分管理+商城营销功能 含详细搭建教程
- 2021年会议平板十大品牌榜中榜,十大会议平板品牌销量排行榜