2018年4月25日

用 CSS3 画加载动画

本文将详细介绍如何用 CSS3 画出如下的加载动画。

(1)

(2)

一、CSS3 简介

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chromesafarifirefoxopera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。

CSS3 浏览器支持

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个关键帧:

  1. 0%,初始为 0.2 倍宽高
  2. 20%,放大为原始宽高
  3. 40%,缩小为 0.2 倍宽高
  4. 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 的要求比较高(实现渐变圆形边框,而且边框的起点要求是圆弧型),动画方面跟上一个例子差不多。

四、其他

2016年九大前端必备动画库

逐帧动画——复杂的动画效果,可以用逐帧动画完成。参考demo

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注


*