# 简介
Loading
主要是整合一些开源的css loading代码,希望大家通过这部分源码,在日常开发中,能够灵活布局,完成一些有趣的css动画等。
Loading
主要包含(但不限)一下知识点:
CSS3 Animation(动画)
CSS3 Transform(动画过渡方式)
CSS3 Box-Shadow(阴影)
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>
2
3
4
5
6
7
示例(从左至右):
<div id="example2"></div>
<style>
#example2 {
height: 80px;
background-image: linear-gradient(to right, red , yellow);
}
</style>
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>
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>
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18