做信息网站怎么赚钱,室内设计师35岁后的出路,淘宝网站建设协议,企业所得税一般交多少这些好看的loading效果#xff0c;你还只会用第三方库吗#xff1f;CSS3教你实现
前言
loading效果在实际开发中是很常见的#xff0c;尤其是在Ajax请求的时候#xff0c;可以给用户一个很好的交互体验。
今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loadin…这些好看的loading效果你还只会用第三方库吗CSS3教你实现
前言
loading效果在实际开发中是很常见的尤其是在Ajax请求的时候可以给用户一个很好的交互体验。
今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loading效果吧文章中的代码可以从公众号前端群自取。 CSS3
实现效果
首先我们来看看需要实现的效果。 效果图
然后我们一个个来看都是怎么实现的吧。
loadingA
loadingA的效果就如音乐播放时的动态条一般不停的连续执行。
其主要实现思路如下 每个竖状条都是一个简单的divdiv为一个小的圆形。 给每个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定义动画
loadingGloadingH
loadingG与loadingH的动画效果如下。 loadingGloadingH
loadingG与loadingH类似loadingH在loadingG的基础上增加了几个点。
loadingG中是通过设置一个纵向的div-1在该div-1内增加一个div-2div-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效果完全可以不用借助于第三方库大家也动动手自己实现一下吧。全部代码的话在微信公众号群文件获取 如果你觉得这篇文章对你有帮助请关注我的 “web前端EDU ”公众号~谢谢 web前端/H5/javascript学习群250777811更多专业前端知识请上
【猿2048】www.mk2048.com
