用 CSS3 画加载动画
- 前端笔记
- 2018-04-25
- 138热度
- 0评论
导航
本文将详细介绍如何用 CSS3 画出如下的加载动画。
(1)
一、CSS3 简介
CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。
CSS3给我们带来了什么好处呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。
CSS3简化了前端开发工作人员的设计过程,加快页面载入速度。
二、CSS3 动画
简单来说,CSS3 动画就是用 CSS 描述几个关键帧(keyframes),然后定义一些过渡方式(animation)把关键帧串起来。
CSS3 动画实例
CSS3 动画技术的优势
- 原生 CSS 速度快(可以开启硬件加速)
- 画质好,抗锯齿
CSS3 动画入门
主要包括以下内容
- 浏览器支持
- keyframe 规则
- animation 参数详解
- 简单 demo
三、加载动画实现详解
1. 脉冲动画:
https://codepen.io/plough/pen/yjNaQW
1.1 html 结构
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<div class="rect6"></div>
</div>
定义了几个 div。
1.2 初始 CSS
.spinner {
margin: 100px auto;
width: 64px;
height: 64px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: rgb(47,122,240);
height: 100%;
width: 6px;
display: inline-block;
border-radius: 15px;
margin-left: 2px;
}
设置一些基本样式。此时得到排列整齐的 6 个宽为 6px,高为 64px 的圆角矩形。
1.3 定义关键帧
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scale(0.2, 0.2) }
20% { -webkit-transform: scale(1.0, 1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% { transform: scale(0.2, 0.2); }
20% { transform: scale(1.0, 1.0); }
}
定义了4个关键帧:
- 0%,初始为 0.2 倍宽高
- 20%,放大为原始宽高
- 40%,缩小为 0.2 倍宽高
- 100%,保持 0.2 倍宽高
1.4 绑定动画
.spinner > div {
-webkit-animation: stretchdelay 1.8s infinite ease-in-out;
animation: stretchdelay 1.8s infinite ease-in-out;
}
参数的意义分别是:绑定名为 stretchdelay 的动画;动画周期为 1.8s;无限循环;规定以慢速开始和结束的过渡效果(相对于匀速,(开始和结束都慢)两头慢)
此时给 6 个圆角矩形都绑定了动画。但是,矩形的动画都是同步播放的。
1.5 设置延迟
.spinner .rect2 {
-webkit-animation-delay: -1.7s;
animation-delay: -1.7s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.5s;
animation-delay: -1.5s;
}
.spinner .rect4 {
-webkit-animation-delay: -1.3s;
animation-delay: -1.3s;
}
.spinner .rect5 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect6 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
以上代码给矩形设置不同的延迟时间。因为周期是 1.8s,所以 -1.7s 相当于 0.1s。
综上,第一个加载动画就完成了。
2. 圆环动画
https://codepen.io/plough/pen/odXzVZ
圆环动画对 CSS 的要求比较高(实现渐变圆形边框,而且边框的起点要求是圆弧型),动画方面跟上一个例子差不多。
四、其他
逐帧动画——复杂的动画效果,可以用逐帧动画完成。参考demo。