# 简介

Loading主要是整合一些开源的css loading代码,希望大家通过这部分源码,在日常开发中,能够灵活布局,完成一些有趣的css动画等。

Loading主要包含(但不限)一下知识点:

  1. CSS3 Animation(动画)

  2. CSS3 Transform(动画过渡方式)

  3. CSS3 Box-Shadow(阴影)

  4. CSS3 Gradients(渐变)

下面我们详尽的讲述一下它们的功能,为后续的源码理解做铺垫。

# Animation

# animation语法

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

# 属性值描述

  • animation-name 规定 @keyframes 动画的名称。

  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

  • animation-timing-function 规定动画的速度曲线。默认是 "ease"。

    • linear 动画从头到尾的速度是相同的。
    • ease 默认。动画以低速开始,然后加快,在结束前变慢。
    • ease-in 动画以低速开始。
    • ease-out 动画以低速结束。
    • ease-in-out 动画以低速开始和结束。
    • cubic-bezier(n,n,n,n)cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  • animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

    • forwards 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
    • backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。
    • both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
  • animation-delay 规定动画何时开始(延时多少s后执行)。默认是 0。

  • animation-iteration-count 规定动画被播放的次数。默认是 1。

  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

    • reverse 动画反向播放。
    • alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
    • alternate-reverse 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
  • animation-play-state 规定动画是否正在运行或暂停(通常控制动画是否运行或暂停)。默认是 "running"。

    • paused 指定暂停动画
    • running 指定正在运行的动画

注意

animation 所有动画属性的简写属性,除了 animation-play-state 属性。

# Transform

# transform语法

transform: none|transform-functions;

# 属性值描述

transform-functions

  • matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
  • translate(x,y) 定义 2D 平移。
  • translate3d(x,y,z) 定义 3D 平移。
  • translateX(x) X 轴平移。
  • translateY(y) Y 轴平移。
  • translateZ(z) Z 轴平移。
  • scale(x[,y]?) 定义 2D 缩放。
  • scale3d(x,y,z) 定义 3D 缩放。
  • scaleX(x) 通过设置 X 轴的值来定义缩放。
  • scaleY(y) 通过设置 Y 轴的值来定义缩放。
  • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放。
  • rotate(angle) 定义 2D 旋转,在参数中规定角度。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜。
  • skewX(angle) 定义沿着 X 轴的 2D 倾斜。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜。
  • perspective(n) 为 3D 元素定义透视视图。

# Box-Shadow

# box-shadow语法

box-shadow: h-shadow v-shadow blur spread color inset;

# 属性值描述

  • h-shadow 指阴影水平偏移量,其值可正可负,正值,则阴影在对象的右边,负值,阴影在对象的左边

  • v-shadow 指阴影的垂直偏移量,其值也可以是正负值,正值,阴影在对象的底部,负值时,阴影在对象的顶部

  • blur 阴影模糊半径,此参数是可选,只能为正值,如果其值为0时,表示阴影不具有模糊效果,值越大阴影的边缘就越模糊

  • spread 阴影扩展半径,其值可为正负值,正值,则整个阴影都延展扩大,反之,则缩小

  • color 阴影颜色,不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就是透明,建议不要省略此参数。

  • inset 阴影类型,默认的投影方式是外阴影;inset就是将外阴影变成内阴影

注意

多层阴影,最内层优先级最高,之后依次降低。使用逗号“,”隔开。

# Gradients

# 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

示例(从上至下):

<div id="example1"></div>
<style>
#example1 {
  height: 80px;
  background-image: linear-gradient(#e66465, #9198e5);
}
</style>
1
2
3
4
5
6
7

示例(从左至右):

<div id="example2"></div>
<style>
#example2 {
  height: 80px;
  background-image: linear-gradient(to right, red , yellow);
}
</style>
1
2
3
4
5
6
7

示例(45°):

<div id="example3"></div>
<style>
#example3 {
  height: 120px;
  width: 120px;
  background-image: linear-gradient(-45deg, red, yellow);
}
</style>
1
2
3
4
5
6
7
8

示例(彩虹):

<div id="example4"></div>
<style>
#example4 {
  height: 80px;
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
</style>
1
2
3
4
5
6
7

# 径向渐变(Radial Gradients)- 由它们的中心定义

创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

repeating-radial-gradient() 函数用于重复径向渐变

示例(椭圆和圆形):

<div id="example5"></div>
<div id="example6"></div>
<style>
#example5 {
  height: 150px;
  width: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */
}

#example6 {
  height: 150px;
  width: 150px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: radial-gradient(circle, red 50%, yellow 60%, green); /* 标准的语法(必须放在最后) */
  /* 颜色后面可以加百分比 */
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18