前端加载动画-三点加载

名词解释

animation（动画）：

语法：
animation:
name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name：指定要绑定到选择器的关键帧的名称

语法：
animation-name: keyframename|none;

keyframename：指定要绑定到选择器的关键帧的名称
none：
ease-in-out：动画以低速开始和结束
linear：动画从头到尾的速度是相同的
ease：默认。动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束

animation-delay（设置动画在启动前的延迟间隔）
animation-fill-mode（把物体动画地从一个地方移动到另一个地方）

语法：
animation-fill-mode: none|forwards|backwards|both|initial|inherit;

forwards：在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值
backwards ：动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值
both：动画遵循 forwards 和 backwards 的规则

步骤与思路：

要实现加载动画，首先需要三个原点用到css的动画知识点与边框知识
实现三点并排出现，可以使用flex或者inline-block
定义帧动画出现时间以及动态效果，使用@keyframes 方法定义帧动画
呈现的效果是依次显示，可以使用animation-delay来延迟出现时间，让加载动画更有层次性

代码实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>加载动画</title>
</head>
<style>.content {margin: 20% auto;width: 150px;}.content > div {width: 20px;height: 20px;background-color: #33e5e5;border-radius: 50%;display: inline-block;animation: action 1.5s infinite ease-in-out;animation-fill-mode: both;}.content .point1 {animation-delay: -0.3s;}.content .point2 {animation-delay: -0.1s;}@keyframes action {0%, 80%, 100% {transform: scale(0);}40% {transform: scale(1.0);}}
</style>
<body>
<div class="content"><div class="point1"></div><div class="point2"></div><div class="point3"></div>
</div>
</body>
</html>

至此加载动画就完成了

前端加载动画-三点加载相关推荐

【vue开发问题-解决方法】（八）利用axios拦截器实现elementUI中加载动画，控制加载区域
[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...
.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...
vue ajax加载动画,vue 请求加载数据的时候如何显示加载动画
提醒一下:建议把ajax的请求,拆分成一个独立的sdk,避免多处重复代码. that.loading(false);应该写到ajax执行结束后. var lhcmDetail=new Vue({ el ...
lua/cocos加载动画以及可以使用加载纹理的方式来替换图片并且加载个人制作的艺术字体(fnt字体)
1.加载spine/json(ExportJson)骨骼动画现在用的比较多 local spineAnim = sp.SkeletonAnimation:create("base/res/ ...
ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
jQuery Ajax 加载数据时异步显示加载动画 ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).re ...
Android实用视图动画及工具系列之三：表情加载动画和失败加载动画，人物加载动画
实现效果功能说明网速慢时,加载网络数据时,界面怎么处理才美观?载入失败或网络丢包时,如何让界面显得更和谐?这一直是开发人员和美工人员不绝于耳的问题,为了达到功能和UI的完美交互,我们不得不做一些基 ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
「切图仔日常」浅谈加载动画两板斧
1.前言此刻深圳大雨瓢泼,周围一片黑压压的.对于这样的日子,果断从冰箱里面拿出肥宅快乐水,打开电脑查看最近更新的番剧,舒服窝在沙发里真是美滋滋. 但是不知道大雨原因,网络加载一直时好时坏,看的贼忧伤 ...
Jquery加载动画
效果图一.使用方法$.openLoadForm([可选参数])显示加载动画 [可选参数] 1.不传参数的情况下,默认显示加载中,请稍后. 2.传递参数 string会将将显示文字替换成传递的值. ...

前端加载动画-三点加载

名词解释

代码实例

前端加载动画-三点加载相关推荐

最新文章

热门文章