css3 制作阳光,CSS3 制作 Loading 动画
虽然现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加快。资深网瘾少女表示,这世上最刺眼的不是阳光,而是“ 正在加载”;最长的不是周杰伦的电影,而是“ 正在加载”;最痛心的事情不是你不爱我,而是“ 正在加载”(语文老师告诉我排比要至少写三句)。
这是为什么呢
为什么 loading 让我们如此痛苦呢?
因为,我们看到的 loading 是这样的是这样的颜值再高一点的是这样的。
这就是为什么要叫他们“ 菊花”,就因为长得丑啊喂!
我们要在这个看脸的世界活下去!!!
刚出生的时候我是个大圆脸,塌鼻梁,单眼皮,曾经一度被隔壁阿姨怀疑我是我妈捡来的==但我善良可爱的母亲大人对我不离不弃,常常跟我说“ 先天不足,后天弥补”,我才有了继续活下去的勇气。作为网页,如果真的没办法改变“ 加载慢” 这个病,那么把 loading 的动画做的好看一点,萌用户一脸血,“ 愉快的时光总是转瞬即逝”。
又是一个刷朋友圈的难眠的夜晚,一篇文章吸引了我《什么样的 loading 动画,我会等!》。只要一点点简单的创意,加一点点简单的动效设计,加载过程就充满了乐趣。
那么我们一起来用纯纯的 CSS3 做几个简单有趣的 loading 动画吧~(效果图均为动图!效果图均为动图!效果图均为动图!)
首先,我们做一个最简单的进度条样的动画(这里偷懒下,只兼容 webkit 内核了==)
其中,animation-timing-function 的默认状态是 ease(低速开始,加快,在结束前变慢),ease-in(低速开始),ease-out(低速结束),ease-in-out(低速开始低速结束),linear(匀速),还可以用 cubic-bezier(0, 0, 0, 0)来设置速度。具体的速度曲线和设置速度值可以在http://cubic-bezier.com上查到。
animation-iteration-count 的 infinite 表示无限次循环;animation-direction 的 normal 表示动画播放完后从头开始播放,reverse 和 normal 相反,是从后向前播放,还有 alternate 会逆向播放。
1
2
3
4
然后我们在@keyframes中规定动画效果,由于是直线进行,所以只有开始和结束两个状态就OK了。
效果如下
卡带 Loading
上面那个黄条是什么鬼==好丑的有没有!!!
于是我灵光一闪,卡带的样子来做 loading 一定不错~
我找了一个卡带的图,把其中的转轮切出来,使用 rotate 来使圆圈旋转。注意要使用 transform-origin: 50% 50%;使动画以圆圈的圆心旋转。
于是就出现了如下的效果:
牛顿摆 Loading
做好了卡带的效果后我的灵感欲罢不能,看到家里的牛顿摆就好想把它做成 loading。
牛顿摆只有两端的小球会动,那么我们只要以绳子顶端为轴心旋转一定的角度就可以啦~于是我们使用 Photoshop 来简单画一个牛顿摆的图片。
但是,摆动速度并不是随便就可以的,毕竟也算是个自由落体运动。开始的时候会有个横向的加速度,然后就是有个向下的重力加速度,毕竟用户中只有少数是物理学家,所以只要有个大概的速度变化即可。也就是说小球开始运动先加速再减速,到最顶端后再加速。于是使用来设置速度。
搞定!于是牛顿摆的 Loading 是这样的:
橘子甩汁 Loading
就说我对取名字什么的不擅长。。。
在开头提到的那篇文章中,我看到了一个动图真的是萌我一脸血,让我不禁咽了咽口水。
就是这货!!
其实叫“ 橘子甩汁” 还是挺形象的==
这里,我将整个动画分为三部分。
第一部分是整个的进度条动画,这里我们的第一个颜值略低的进度条就派上了用场。我们将背景色换成黄色,然后给进度条加上 8px 的 border 就可以啦。
第二部分是最右边的橘子切面,只要固定好位置就可以,注意,一定要将它置到最顶。
第三部分就是橘子果肉部分,因为要向不同方向旋转不同路径运动,所以我分成了三个状态。
translate 为平移运动,translate(left 的值,top 的值);rotate 从 0 到 360 度为逆时针转动,反之为顺时针转动。通过给 translate 和 rotate 设置的值不同,就可以改变果肉运动的状态。然而我们不可以让他们同时间出现,那么我们可以为其中一个果肉动画设置 delay,这样就有了果肉不断被甩出的效果。
css3 动画十分简单有趣,只要通过简单的平移变换的组合就可以做出很多可爱的动效。
如果 loading 动画不再是菊花,那么等待也不再是件痛苦的事了。
css3 制作阳光,CSS3 制作 Loading 动画相关推荐
- html发光loading,Canvas 制作炫酷发光loading动画
Canvas制作炫酷发光loading动画 /* NOTE: The styles were added inline because Prefixfree needs access to your ...
- CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...
- CSS3 animation实现点点点loading动画
一.再续前缘 去年夏天,写了篇名为"CSS3 animation渐进实现点点点等待提示效果"的文章,主要内容是实现类似下面打点等待提示效果,比干巴巴的字符...要更人性化: 之前实 ...
- css3 制作阳光,CSS3 散射的阳光动画背景
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; } html { background-color: #e76027; overf ...
- html css3各类加载中的loading动画效果
效果一: 一.HTML <div class="loader">Loading...</div> 二.CSS /*绿色背景*/ body { back ...
- jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
- HTML5+CSS3小实例:黏性小球loading动画
HTML5+CSS3实现黏性小球的loading动画,主要通过 contrast 和 blur 两个滤镜搭配使用,进而实现小球来回穿梭的动画,动画过程伴随着融球效果,如此精致细腻的动画,用来做个loa ...
- Loading动画的最佳实现方式
点击上方 "程序员小乐"关注, 星标或置顶一起成长 每天凌晨00点00分, 第一时间与你相约 每日英文 Maturity not to see how old you, but y ...
- php设置加载动画,如何用CSS3制作页面圆圈加载动画(附代码)
打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...
最新文章
- 易语言win10写文件到c盘,Win10电脑怎么转移c盘文件?
- 基于Pytorch的从零开始的目标检测 | 附源码
- Kubernetes构建过程分析
- 每日一笑 | 终于知道为什么胖了之后气质会垮了
- windows系统SSH证书设置
- 13个您应该安装的WordPress插件
- leetcode - 4. Median of Two Sorted Arrays
- 关于三角函数图像的思考
- 使用Lua 局部变量来优化性能,同一时候比較局部变量和全局变量
- LightGBM 二元分类、多类分类、 Python的回归和分类器应用
- c语言time函数详解,C语言Time函数
- Highcharter绘制中国地图
- xp系统打开计算机硬盘分区,如何在xp系统对硬盘进行分区
- MCU通过UART实现OTA在线升级流程
- android刷机包基带,手机刷机有必要刷底包基带吗?刷安卓机中基带/底包/固件详解...
- bmob php支付,Bmob支付
- python tensorflow2 deeplearning 音频处理 声学事件检测
- 如何了解职场公司信息,正确投简历?
- 网友形容丑的50种搞笑方式(转载)
- [Mysql] PERCENT_RANK()函数 | CUME_DIST()函数