# CSS 的运动
就是让一个盒子改变它的状态或位置。
改变位置：用盒模型、偏移属性、浮动
改变状态：鼠标摸上去，添加 class
但是这样的运动没有任何过渡，太突兀了，可以添加过渡样式实现过渡效果，让运动如丝滑般顺滑
# 过渡 transition
该属性可以让元素实现过渡效果，让状态或位置的改变不是瞬间完成而是按照一定的方式和过程完成。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| transition:style duration delay timing-function;
//参数说明
transition:要过渡的样式 持续时间 是否延迟进行 运动形式;
样式：一般写能让元素改变状态或改变位置的。
JQ：
div.show(400)
div.animate({},时间，运动形式，回调)
//写法
最少可以写一个：时间
最多写4个，按照顺序来写
//样式中可以指定某一个样式属性，比如width,也可以指定所有的样式，添加all
//运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
|
该属性是一个复合属性，可以拆分为以下 4 个属性：
1
2
3
4
5
| transition可以拆分为：
transition-property 要运动的样式 （all || [attr] || none）
transition-duration 运动时间【必选参数】
transition-delay 延迟时间
transition-timing-function 运动形式
|
# 变换、变形
学一个属性，和 4 个属性值
transform:translate|rotate|skew|scale;
-
transform:translate;
作用：类似于 left,top，改变盒子的位置。
区别：left,top 需要结合定位属性，但是 transform 不需要。
1
2
3
4
5
| transform:translate(x,y);
可以拆分为两个子属性：
transform:translateX(x);
transform:translateY(y);
特点：不会影响周边元素的位置。
|
-
transform:rotate(deg);
作用：让元素根据指定的度数旋转。
1
2
3
4
| //该属性不能拆分
transform:rotate(90deg);
//如果是正数，则是顺时针旋转
//如果是负数，则是逆时针
|
-
transform:skew (deg) -- 用得不太多
作用：让元素扭曲变形
1
2
3
4
5
6
7
8
| transform:skew(x,y)
//如果只写一个值，表示的是x方向，如果写两个，则x,y都斜切
x表示水平方向斜切，y表示垂直方向斜切
//可以拆分为：x,y
transform:skewX(度数)
transform:skewY(度数)
//
transfrom:skew(45deg)===> transform:skewX(45deg)
|
-
transform:scale(x,y)
作用：让元素缩放。默认是 1，比 1 大则放大，比 1 小，则缩小
1
2
3
4
5
6
| transform:scale(1.2)//放大到原来的1.2倍
//写法：
transform:scale(0.5)
transform:scale(1.2,1.5)
transform:scaleX(1.2);//只有一个x方向放大
transform:scaleY(1.2);//只有一个y方向放大
|
-
如何让一个元素使用多重动画效果
1
2
3
4
5
| transform:变换样式1 [变换样式2 变换样式3,4]
//也就是不能写成下面的效果
transform:变换样式1
transform:变换样式2
transform:变换样式3
|
# 改变旋转中心
transform-origin 属性
设置元素转换的基点位置：
1
2
3
4
5
| 语法:
transform-origin：x y;
x的取值为left、center、right、px、%
y的取值为top、center、bottom、px、%
默认旋转中心为transform-origin：50% 50%;
|
# 运动的规则【总结】
- 动画一般是用户触发，所以动画会加在 hover 上或使用 JS 动态添加一个 class 来响应用户操作：比如鼠标摸上去或点击某个按钮等
- 行内元素需要转为块级或行内块级才可以使用动画效果（transform 只能用于块级和行内块级）
- transition 属性不仅仅只是服务于 transform 属性，还服务于其他的任何可以实现位移或者状态改变的样式，比如盒模型、透明度、偏移属性等。
- transition 是一次性的，不能重复发生，除非再次触发
- transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态（类似于鼠标摸上去和鼠标离开）。
# CSS3 动画实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现下拉菜单特效</title>
<style type="text/css">
*{padding:0;margin:0;}
ul{ list-style: none; }
a{ color: #fff; text-decoration: none; font-size: 14px }
.menu{ width: 400px; height: 40px; line-height: 40px; background-color: #DE0031;}
.menu>li{ float: left; width: 25%; position: relative; }
li a{ display: block; text-align: center; }
.sub{position: absolute; top: 40px; left: 0;width:100px;height:0;background-color: #DE0031;
transition: height 1s;
}
.menu>li:hover .sub{ height:120px; }
.sub li{ height: 40px; line-height: 40px; }
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">菜单1</a>
<ul class="sub">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul class="sub">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul class="sub">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单4</a>
<ul class="sub">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
</body>
</html>
|
# CSS3 的自定义动画
自定义动画的两个步骤：
-
声明一个动画（函数声明）
function 函数名 (){
}
-
调用动画（让谁动，就写在谁身上）
# 定义关键帧的选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| //简配版
@keyframes 动画名字{
//写动画的步骤，状态
//开始状态，用关键字from
from{
//写让css动起来的样式
//昨天学的+之前学的（盒模型、偏移属性、透明度、颜色）
}
//结束状态，用关键字to
to{
//这里的代码同上
}
}
//以上只有两个状态，如果要定制更多的状态，通过百分比来定制
//完全版,0%~100%随便写
@keyframes 动画名字{
//0%相当于是from关键字
0%{
}
。。。
10%{
}
50%{
}
80%{
}
//100%相当于是to
100%{
}
}
|
# 调用动画的属性 animation
只是比昨天的 transition 多了 3 个属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| //语法：
animation: 动画名字 动画时间 动画延迟时间 运动方式 动画次数 动画运动方向。
//参数说明：
前面4个参数跟昨天的一样，将样式改为动画名字
动画次数：指的是动画重复的次数，默认值是1,特殊值：infinite（无限次）
运动方向：默认是单一方向（normal，0-100%），可以让它来回走（alternate，0-100-0-100）。
//最少写两个参数：前面两个
比如：
div{
/* 完整写法： */
animation: myfirst 5s linear 2s infinite alternate;
animation: myfirst 5s;
}
所有动画属性的简写属性，除了 animation-play-state 属性
|
控制动画是否播放或暂停的一个属性：
animation-play-state：running (默认值)|paused（暂停）
animation 的拆分写法：
1
2
3
4
5
6
7
8
| 所有animation属性:
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;值n、infinite（无限次）*/
animation-direction: alternate;
animation-play-state: running;
|
# 第三方的动画库 animate.css
https://animate.style/
-
导入他整个样式文件使用
请看案例
-
借鉴它的动画写法（拿来主义），只使用部分
# CSS3 自定义动画实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业3</title>
<style>
@keyframes run {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.box {
margin: 50px auto;
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #c45575;
border: #a64863 solid 5px;
position: relative;
}
.box div{
transform-origin: 25px 5px;
position: absolute;
left: 100px;
top: 125px;
height: 10px;
}
.hour {
width: 100px;
background-color: #edb95b;
animation: run 6s infinite;
}
.min {
width: 120px;
background-color: #676bed;
animation: run 3s infinite;
}
.sec {
width: 148px;
background-color: #f78c5f;
animation: run 1s infinite;
}
</style>
</head>
<body>
<div class="box">
<div class="hour"></div>
<div class="min"></div>
<div class="sec"></div>
</div>
</body>
</html>
|
