漂亮loading加载动画,这些方法可知道?

这些好看的loading效果,你还只会用第三方库吗?CSS3教你实现前言

loading效果在实际开发中是很常见的,尤其是在Ajax请求的时候,可以给用户一个很好的交互体验。

CSS3

实现效果

首先我们来看看需要实现的效果。

效果图

然后我们一个个来看都是怎么实现的吧。

loadingA

loadingA的效果就如音乐播放时的动态条一般,不停的连续执行。

其主要实现思路如下:

每个竖状条都是一个简单的div,div为一个小的圆形。

给每个div加上一个动画效果,该动画的效果是高度逐渐变长,最后再变回原样。

每个div延迟不同的时间才开始执行,这样就会有先后的层次感。

然后我们来看看各个部分的代码实现。

基本的div元素

基本的div元素是一个小的圆形。

基本的div元素

定义动画

定义的动画主要是改变div的高度,在完成50%的时候达到最高值,完成100%时恢复到原来高度。

动画效果

设置动画

将定义的动画添加至animation属性,设置一个动画总执行时间,然后给5个div设置不同的延时时间。

设置动画

HTML元素

将以上设置的CSS属性都添加至HTML元素中。

HTML元素

将以上代码写完后,直接在浏览器运行就可以看到如loadingA的效果了。

loadingB

如果细心的看完loadingA的实现过程,一定可以联想到loadingB的实现。

loadingA是通过给高度加动画,那么loadingB就是通过给宽度加动画,同样给5个div不同的延迟时间。

这里我只给出其动画定义,其他的内容与loadingA类似,详细的内容可以通过github去看。

loadingB动画

loadingC

loadingC的实现效果如下。

loadingC

在loadingA和loadingB中是通过给高度和宽度增加动画实现的,而loadingC是通过给五个div增加纵向位移实现的。

loadingC实现的关键点就在于translateY的使用,因为动画是从下往上跳动,所以在完成度50%时,translateY设定为负值。

其定义的动画部分代码如下所示。

定义动画

loadingD

loadingD的实现效果如下。

loadingD效果

通过效果图我们发现有两点差异:

loading过程中透明度会发生变化,这个通过opacity实现。

在接近完成时有个上下轻微抖动的效果,这个通过设置小单位的正负translateY值。

得到的动画代码如下。

loadingD动画

loadingE

loadingE的动画效果如下。

loadingE

loadingE的效果同loadingD类似,loadingD是通过纵向的位移变换,可以通过translateY实现。

loadingE是通过水平方向位移变换,可以通过translateX来实现。

而有一点不同的是,loadingE的div初始位置就是translateX(-300px),表示从左侧开始运动。

loadingE动画

loadingF

loadingF定义的动画如下所示。

loadingF

loadingF是旋转效果,可以很容易想到是通过rotate实现。

loadingF中只有一个div,边框设置为虚线即可,其CSS样式如下。

loadingF基本样式

其定义的动画样式如下。

loadingF定义动画

loadingG&loadingH

loadingG与loadingH的动画效果如下。

loadingG&loadingH

loadingG与loadingH类似,loadingH在loadingG的基础上增加了几个点。

loadingG中是通过设置一个纵向的div-1,在该div-1内增加一个div-2,div-2就是转动的圆点,div-2通过绝对定位计算出实际位置,当div-1大小变化时,div-2也应该重新计算位置。

div-2的CSS代码如下所示。

loadingG基本样式

在loadingH中,div-1内有四个div,分别表示转动的四个圆点,也是通过绝对定位计算偏移位置。

最后设置动画,只需要让div-1在一个动画周期内旋转360度即可。

loadingG

loadingI

loadingI的效果图如下所示。

loadingI

loadingI的动画主要涉及到放大缩小和旋转两个方面,放大缩小通过scale实现,旋转通过rotate实现。具体的可以看看github上的完整代码。

结束语

今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果,完全可以不用借助于第三方库,大家也动动手自己实现一下吧。全部代码的话在微信公众号群文件获取!

感谢 · 转发

欢迎大家留言

为什么不让自己身边的朋友也欣赏这样好的文章呢?

本文来自企鹅号 - 零基础学代码媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏别先生

HTML+CSS纯干货就业前基础到精通系统学习2016/9/3

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接...

2139
来自专栏前端儿

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:aut...

1471
来自专栏deepcc

jquery nicescroll 配置参数

4038
来自专栏angularejs学习篇

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用。

4812
来自专栏liulun

学习WPF——WPF布局——初识布局容器

StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window ...

2267
来自专栏js编程在工科课程中的简单应用

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

1340
来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

1603
来自专栏小白安全

HTML+CSS基础到精通系统学习

1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使...

3545
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(5)---常用的单元格类型(下)

在上一篇,我们介绍了常用了文本类型单元格。除了文本型单元格外,Spread还支持如下13种图形单元格类型:组合框单元格、按钮单元格、复选框单元格、超链接单元格、...

2476
来自专栏前端黑板报

居中“魔法”总结

作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因...

24910

扫码关注云+社区

领取腾讯云代金券