CSS加载动画

实现加载动画效果,需要的两个关键步骤:

1、做出环形外观

border:16px solid #f3f3f3;
border-radius:50%;
border-top:16px solid #2e8e9a;

2、使环形转动 animation

  动画的实现使用 animation,animation  属性用来指定一组或多组动画,每组之间用逗号相隔,animation是一个简写属性。

每个动画定义中的属性值的顺序很重要:

可以被解析为 时间的值,单位毫秒 ms:

第一个值被分配给 animation-duration(指定一个动画周期时长),

第二个分配给 animation-delay(从动画应用在元素上到动画开始的这段时间的长度)。

每个动画定义中的值的顺序,对于区分 animation-name 值和其他关键字也很重要。

解析时,对于animation-name 之外的有效的关键字,必须被前面的简写中没有找到值的属性所接受。

此外,在序列化时,animation-name 与以及其他属性值作区分等情况下,必须输出其他属性的默认值。

例如:

animation:load 2s linear infinite;

上面简写代码可以分解为:

  animation-name 动画名称为 load;

  animation-duration 一个动画周期时长为 2s;

  animation-timing-function  在每一动画周期中执行的节奏为 linear;

  animation-timing-count  动画在结束前运行的次数为 infinite(无限次数)

注意使用厂商前缀 -webkit 或是-ms- 用于不支持 animation 和 transform 属性的浏览器。

HTML 代码

<div class='loader'></div>

CSS代码

.loader{
border:16px solid #f3f3f3;
border-radius:50%;
border-top:16px solid #2e8e9a;
width:100px;
height:100px;
/* animation-name:load; */
animation:load 2s linear infinite;
}
@keyframes load{
0%{
transform: rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

实现效果:

其他加载动画样式

主要是依靠变换边框的颜色

CSS代码

 .loader{
border:16px solid #f3f3f3;
border-color:#00ffff #00ccff #0099ff #0066ff;
border-radius: 50%;
width:100px;
height:100px;
animation:load 2s linear infinite;
}
@keyframes load{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

实现效果:


参考资料:

https://www.runoob.com/css/css-examples.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations

CSS 加载动画的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. css加载动画...

    加载动画... <p>加载动画...</p> <p> </p> <p> </p> <style><!-- .c ...

  3. css加载动画(纯css和html)

    从jq官网上摘抄下来的一个简单加载动画,个人比较喜欢使用~存在这里,作为记录 话不多说~上代码 <!DOCTYPE html> <html lang="en"&g ...

  4. 好用的纯CSS加载动画-spinkit

    首先放一个css  spinkit <style> .loaders{ width: 100%; height: 100%; padding: 100px; box-sizing: bor ...

  5. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  6. 弹跳加载动画特效Bouncing loader

    一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动.流畅.兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果 ...

  7. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  8. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  9. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

随机推荐

  1. 实现hashmap

    /**数组下面挂着链表*/ #include<stdio.h> #include<unistd.h> #include<stdlib.h> #include< ...

  2. winform把所有dll打包成一个exe

    大家都知道做winform开发,是可以利用visual studio进行打包的,但是这种打包的方式需要双击安装,那么有没有什么方法,可以把winform程序打包成绿色版呢?当然,这里的“绿色版”也是相 ...

  3. [HNOI2019]序列(单调栈+二分)

    通过打表证明发现答案就是把序列划分成若干段,每段的b都是这一段a的平均数.50分做法比较显然,就是单调栈维护,每次将新元素当成一个区间插入末尾,若b值不满足单调不降,则将这个区间与单调栈前一个区间合并 ...

  4. linux下U盘变成只读文件系统的修复

    问题描述: U盘插入linux下后变成了只读文件系统,不能再往u盘里拷贝文件. 总结:产生这个问题的原因可能是u盘文件系统损坏,操作系统为了防止它损坏系统,将它设置成了只读 修复方法: 在window ...

  5. 分享几个4412开发板新录制的视频,不是VIP也能看

    如果能点个赞就更好啦 iTOP4412开发板介绍https://www.bilibili.com/video/av74453392 iTOP4412开发板系统编程前言https://www.bilib ...

  6. rest framework-认证&权限&限制-长期维护

    ###############   自定义token认证    ############### 表 class User(models.Model): name=models.CharField(ma ...

  7. Normally Distributed|

    6.1Introducing Normally Distributed Variables Why the word “normal”? Because, in the last half of th ...

  8. QLIKVIEW添加数据库连接

    1.点击文件 2.点击编辑脚本 3.点击 工具-ODBC管理员 4.添加DSN 5.里面的常规操作不再赘述 6.完成

  9. 获取指定网卡对应的IP地址

    #include <stdio.h> #include <string.h> #include <sys/socket.h> #include <sys/ty ...

  10. 荼菜的iOS笔记--UIView的几个Block动画

    前言:我的第一篇文章荼菜的iOS笔记–Core Animation 核心动画算是比较详细讲了核心动画的用法,但是如你上篇看到的,有时我们只是想实现一些很小的动画,这时再用coreAnimation就会 ...