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. android searchview 简单使用

    设置样式 drawable bg_search/xml android:background="@drawable/bg_search" <shape xmlns:andro ...

  2. Java--类以及对象

    什么是类 就是将一类事物的相同的本质特性抽象出来,类具有属性和方法,属性就是特征(具有什么),方法就是行为(能做什么). 类是一种引用的数据类型,类创建的对象的过程叫做实例化 什么是对象 对象就是类中 ...

  3. Gson、jackson 序列化,反序列化(单个、集合)

    实体类: package com.nf.redisDemo1.entity; public class News { private long id; private String title; pr ...

  4. hdu 2586 How far away ?(LCA模板)(倍增法)

    在dfs的过程中维护三个数组: deep[i],表示i点在树中的深度: grand[x][i],表示x的第2^i个祖先的节点编号: dis[x][i],表示x到它2^i祖 #include<io ...

  5. IPC之——信号量集

    信号量集用于对存在竞争的资源加锁 1.semId=semget(key,nsems,semflg) key:为信号量集名称,可以指定为0455等数字,也可以为PC_PRIVATE nsems:创建几个 ...

  6. mysql中in和exist的区别

    mysql中in和exists的区别 -- in写法select * from A where A.id in (select bid from  B ) and A.name in (select ...

  7. python运行报错——注释报错

    本人是IT行业的,从事软件测试,还是个菜鸟.希望大神们多多关照~ 首先,开通这个博客的目的: 1)通常我容易犯一些低级的错误,而且在网上找到解决方法,解决之后时间长了又不记得: 2)想和有共同兴趣的人 ...

  8. spring和mybatis整合报错:org.springframework.beans.MethodInvocationException: Property 'dataSource' threw exception; nested exception is java.lang.NoClassDefFoundError

    Exception in thread "main" org.springframework.beans.factory.UnsatisfiedDependencyExceptio ...

  9. mysql 优化配置和方面

    MySQL性能优化的参数简介 公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20 ...

  10. vuex-cart 介绍

    使用vue2 + vuex + vue-cli + localStorage + less,实现本地储存的购物车. 安装 1 git clone https: 1 cd sls-vuex 1 npm ...