css3动画

92 阅读 0 评论 61 点赞

我是靠谱客的博主美丽仙人掌，这篇文章主要介绍css3动画，现在分享给大家，希望可以做个参考。

CSS3动画

过渡、线性渐变、径向渐变

1.过渡
transition过渡，两种方式，一种是分开写每项属性、一种是合写。

方式一：分开写四个属性
1.transition-property 设置过渡属性可以单写属性也可以用all代替全部
2.transition-duration 设置过渡时间单位s
3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速
4.transition-delay 设置过渡延时单位s

方式二：合写只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序
transition: all 1s linear 0.2s; //过渡全部属性、执行1秒钟、匀速执行、延迟0.2秒钟

2.线性渐变
linear-gradient线性渐变主要是围绕三步来做，1. 需要渐变方向; 2. 渐变颜色; 3. 渐变范围;
background-image: linear-gradient(方向, 颜色范围, 颜色范围…);

方向角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转;

复制代码

1
2
to right === 90deg to bottom === 180deg 默认 180deg to bottom;

方式一：角度，颜色范围，颜色范围，颜色范围，颜色范围

复制代码

1
2
3
右方向，0%-20%之间是red颜色、50%-100%之间是blue颜色、其它是渐变颜色
background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%);

方式二：角度，颜色范围，颜色范围，开始和结尾默认0% 100%

复制代码

1
2
3
右方向，开始和结尾默认0% 100%
background-image: linear-gradient(to right,red 20%,blue 50%);

方式三：颜色范围，颜色范围，不写角度，角度默认180deg

复制代码

1
2
background-image: linear-gradient(red 20%, blue 50%);

3.径向渐变
radial-gradient径向渐变主要是围绕着半径、圆心位置X Y, 颜色范围, 颜色范围…来设置值的；

方式一：半径 at 圆心位置X Y, 颜色范围, 颜色范围

复制代码

1
2
3
半径100px、 圆心坐标100px 100px、50%是red颜色、50%是yellow颜色，超出渐变范围的用最外面的颜色填充（也就是yellow）
background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%);

方式二：半径 at 圆心位置X Y, 颜色范围, 颜色范围 …

复制代码

1
2
3
不写范围, 平均分配范围
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);

4.案例
过渡渐变案例

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box,
.box1,
.box2 {
width: 200px;
height: 200px;
margin: 10px 30px;
border: 1px solid #000;
float: left;
}
/* 过渡CSS */
.box {
opacity: 0.5;
color: white;
background-color: blue;
/* 方式一：分开写四个属性 */
/* 1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部 */
/* transition-property: width,height; */
transition-property: all;
/* 2.transition-duration 设置过渡时间 单位s */
transition-duration: 2s;
/* 3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速 */
transition-timing-function: ease;
/* 4.transition-delay 设置过渡延时 单位s */
transition-delay: 0.5s;
/* 方式二：合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序 */
transition: all 1s linear 0.2s;
}
.box:hover {
width: 250px;
height: 250px;
opacity: 1;
background-color: red;
}
/* 线性渐变 */
.box1 {
/* 三步骤：1. 需要渐变方向 2. 渐变颜色 3. 渐变范围 */
/* background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...) */
/* 方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转 */
/*
to right === 90deg
to bottom === 180deg
默认 180deg to bottom */
/* 方式一：角度，颜色 范围，颜色 范围，颜色 范围，颜色 范围 */
/* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */
/* 方式二：角度，颜色 范围，颜色范围
开始和结尾默认0% 100%*/
/* background-image: linear-gradient(to right,red 20%,blue 50%); */
/* 方式三：角度默认180deg */
background-image: linear-gradient(red 20%, blue 50%);
}
/* 径向渐变 */
.box2 {
/* 步骤： 半径, 圆心,颜色, 颜色范围
*/
/* 1. 半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 ..... */
/* 2. 超出渐变范围的用最外面的颜色填充 */
/* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */
/* 3.如果不写范围, 平均分配 */
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
}
.sbox {
width: 600px;
height: 360px;
margin: 10px 50px;
position: relative;
overflow: hidden;
}
.sbox img {
width: 600px;
height: 360px;
}
.sbox:hover::before{
/* transform只能设置一次 后面的会把前面的覆盖掉 */
/* 鼠标移到图片 斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s;
}
.sbox:hover::after{
/* 鼠标移到图片 延迟0.2s斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s 0.2s;
}
.sbox::before , .sbox::after{
content: "";
width: 20px;
height: 360px;
position: absolute;
top: 0px;
left: -210px;
/*设置斜切 */
transform: skew(-45deg);
/* 设置线性渐变 */
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0));
}
</style>
</head>
<body style="background-color: black;">
<div class="pbox clearfix">

<div class="box">过渡属性讲解</div>

<div class="box1">线性渐变</div>

<div class="box2">径向渐变</div>
</div>
</body>
</html>

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix {
clear: both;
}
.clearfix:before,
.clearfix:after {
content: "";
display: block;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.box,
.box1,
.box2 {
width: 200px;
height: 200px;
margin: 10px 30px;
border: 1px solid #000;
float: left;
}
/* 过渡CSS */
.box {
opacity: 0.5;
color: white;
background-color: blue;
/* 方式一：分开写四个属性 */
/* 1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部 */
/* transition-property: width,height; */
transition-property: all;
/* 2.transition-duration 设置过渡时间 单位s */
transition-duration: 2s;
/* 3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速 */
transition-timing-function: ease;
/* 4.transition-delay 设置过渡延时 单位s */
transition-delay: 0.5s;
/* 方式二：合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序 */
transition: all 1s linear 0.2s;
}
.box:hover {
width: 250px;
height: 250px;
opacity: 1;
background-color: red;
}
/* 线性渐变 */
.box1 {
/* 三步骤：1. 需要渐变方向 2. 渐变颜色 3. 渐变范围 */
/* background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...) */
/* 方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转 */
/*
to right === 90deg
to bottom === 180deg
默认 180deg to bottom */
/* 方式一：角度，颜色 范围，颜色 范围，颜色 范围，颜色 范围 */
/* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */
/* 方式二：角度，颜色 范围，颜色范围
开始和结尾默认0% 100%*/
/* background-image: linear-gradient(to right,red 20%,blue 50%); */
/* 方式三：角度默认180deg */
background-image: linear-gradient(red 20%, blue 50%);
}
/* 径向渐变 */
.box2 {
/* 步骤： 半径, 圆心,颜色, 颜色范围
*/
/* 1. 半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 ..... */
/* 2. 超出渐变范围的用最外面的颜色填充 */
/* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */
/* 3.如果不写范围, 平均分配 */
background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
}
.sbox {
width: 600px;
height: 360px;
margin: 10px 50px;
position: relative;
overflow: hidden;
}
.sbox img {
width: 600px;
height: 360px;
}
.sbox:hover::before{
/* transform只能设置一次 后面的会把前面的覆盖掉 */
/* 鼠标移到图片 斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s;
}
.sbox:hover::after{
/* 鼠标移到图片 延迟0.2s斜切平移 */
transform: translateX(1000px) skew(-45deg);
transition: all 1s 0.2s;
}
.sbox::before , .sbox::after{
content: "";
width: 20px;
height: 360px;
position: absolute;
top: 0px;
left: -210px;
/*设置斜切 */
transform: skew(-45deg);
/* 设置线性渐变 */
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0));
}
</style>
</head>
<body style="background-color: black;">
<div class="pbox clearfix">
<!-- transition:过渡 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。并不仅仅局限于hover状态,也可以通过修改class -->
<div class="box">过渡属性讲解</div>
<!-- linear-gradient：线性渐变 -->
<div class="box1">线性渐变</div>
<!-- radial-gradient: 径向渐变 -->
<div class="box2">径向渐变</div>
</div>
</body>
</html>

2D动画
转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1.移动 translate(x, y)

1.移动 translate(x, y) 可以改变元素的位置，x、y可为负值,
transform: translate(300px,300px);
2.除了可以像素值，也可以是百分比，相对于自身的宽度或高度,
transform: translate(100%, 100%);
3.常用到居中使用，
transform: translate(-50%,-50%);

2.缩放 scale(x, y)

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，
transform: scale(1,2);
2.一般情况下x y值都是一样的值，
transform: scale(2);

3.旋转 rotate(deg)

旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针,
transform: rotate(45deg);

4.斜切 skew(x, y)

斜切 skew(x, y) 单位deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果,
transform: skew(20deg,20deg);

5.案例
移动、缩放、旋转、斜切动画

2D转换

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 140px;
height: 140px;
line-height: 140px;
background-color: blue;
transition: all 2s;
margin: 20px 50px;
color: white;
text-align: center;
}
.tl:hover {
/* 移动 translate(x, y) 可以改变元素的位置，x、y可为负值 */
/* transform: translate(300px,300px); */
/* transform: translate(-100px,-100px); */
/* 除了可以像素值，也可以是百分比，相对于自身的宽度或高度 */
transform: translate(100%, 100%);
/* transform: translate(-50%,-50%); 常用到居中使用 */
}
.se:hover {
/* 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数； */
transform: scale(1.5);
/* transform: scale(1,2); */
}
.rt:hover {
/* 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针 */
/* transform: rotate(45deg); */
transform: rotate(-60deg);
}
.sk:hover {
/* 斜切 skew(x, y)deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果 */
transform: skew(20deg, 20deg);
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 给 body 添加径向渐变 */
body {
background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);
}
img {
position: absolute;
left: 0px;
bottom: -190px;
}
body:hover img {
transition: all 4s;
transform: translate(1400px, -800px) scale(0) rotate(45deg);
}
</style>
</head>
<body>

<div class="tl">平移 translate</div>

<div class="se">缩放 scale</div>

<div class="rt">旋转 rotate</div>

<div class="sk">斜切 skew</div>

<img src="../img/rocket.png" alt="">
</body>
</html>

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
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 140px;
height: 140px;
line-height: 140px;
background-color: blue;
transition: all 2s;
margin: 20px 50px;
color: white;
text-align: center;
}
.tl:hover {
/* 移动 translate(x, y) 可以改变元素的位置，x、y可为负值 */
/* transform: translate(300px,300px); */
/* transform: translate(-100px,-100px); */
/* 除了可以像素值，也可以是百分比，相对于自身的宽度或高度 */
transform: translate(100%, 100%);
/* transform: translate(-50%,-50%); 常用到居中使用 */
}
.se:hover {
/* 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数； */
transform: scale(1.5);
/* transform: scale(1,2); */
}
.rt:hover {
/* 旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针 */
/* transform: rotate(45deg); */
transform: rotate(-60deg);
}
.sk:hover {
/* 斜切 skew(x, y)deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果 */
transform: skew(20deg, 20deg);
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
/* 给 body 添加径向渐变 */
body {
background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);
}
img {
position: absolute;
left: 0px;
bottom: -190px;
}
body:hover img {
transition: all 4s;
transform: translate(1400px, -800px) scale(0) rotate(45deg);
}
</style>
</head>
<body>
<!-- 平移 translate 移动位置相当于从自身原来位置 -->
<div class="tl">平移 translate</div>
<!-- 缩放 scale -->
<div class="se">缩放 scale</div>
<!-- 旋转 rotate -->
<div class="rt">旋转 rotate</div>
<!-- 斜切 skew -->
<div class="sk">斜切 skew</div>
<!-- 飞机飞向太阳案例 -->
<img src="../img/rocket.png" alt="">
</body>
</html>

3D动画

transform:不仅可以2D转换，还可以进行3D转换。
用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。

三维坐标轴
1.translate平移
1.transform: translateX(100px)， x轴移动100px,可以为负值；
2.transform: translateY(100px)，y轴移动100培训，可以为负值；
3.transform: translateZ(50px),z轴移动50px，可以为负值；
4.transform: translate3d(x, y, z) xyz是三轴移动的距离

复制代码

1
2
3
4
5
6
7
8
9
/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);
/*xyz是三轴移动的距离*/
transform: translate3d(100px, 100px, 100px);

2.rotate旋转

值可以是正值或负值可以连写多个旋转角度;
1.translateX() 伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向;
2.translateY() 伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向;
3.rotateZ(*) 伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向;
4.transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度;

/* 值可以是正值或负值可以连写多个旋转角度 /
/ 1.transform: rotateX(deg);让元素在平面2D中旋转 /
/ 心中自有3个轴 /
/ transform: rotate(45deg); /
/ 1.伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向 /
/ transform: rotateX(45deg); /
/ 2.伸出左手，大拇指指朝下正方向，手指卷曲的方向, 就是旋转的正方向 /
/ transform: rotateY(45deg); /
/ 3.伸出左手，大拇指指脸正方向，手指卷曲的方向, 就是旋转的正方向/
/* transform: rotateZ(45deg); /
/ transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); /
/ transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度*/
transform: rotate3d(1,0,0,45deg);

3.transform-style

preserve-3d:给父盒子添加，让子元素3D的空间布局，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。
一个3d元素可以没有perspective，但是不能没有transform-style

复制代码

1
2
3
4
5

body {
transform-style: preserve-3d;
}

4.案例

用 transform-style: preserve-3d;来展示3d效果

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
/* 一般设置给整个3d整体的父级 */
/* perspective: 1000px; */
transform-style: preserve-3d;
}
.father {
width: 120px;
height: 200px;
border: 1px solid #000;
margin: 10px auto;
position: relative;
/* 父元素Y轴偏移一点 否则看不出效果 */
transform: rotateY(26deg);
/* perspective 只是使子盒子拥有近大远小的视觉效果 */
/* perspective: 1000px; */
/* 真正实现3d transform-style: preserve-3d 实现的 */
/* 默认值 flat 表示平面布局 */
/* preserve-3d 是我们真正使得子盒子按三维立体进行布局, 一定要加给父元素 */
transform-style: preserve-3d;
}
.son1,
.son2 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 200px;
}
.son1 {
background-color: blue;
}
.son2 {
background-color: red;
transform: rotateX(45deg);
}
.lt {
width: 180px;
height: 180px;
border: 1px solid #000;
margin: 60px auto;
position: relative;
transition: all 5s;
transform-style: preserve-3d;
}
.lt:hover {
/* XYZ都旋转 */
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
.lt li {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.lt li:nth-child(1) {
background-color: blue;
transform: translateZ(90px);
}
.lt li:nth-child(2) {
background-color: blueviolet;
transform: rotateX(90deg) translateZ(90px);
}
.lt li:nth-child(3) {
background-color: brown;
transform: rotateX(180deg) translateZ(90px);
}
.lt li:nth-child(4) {
background-color: chartreuse;
transform: rotateX(270deg) translateZ(90px);
}
.lt li:nth-child(5) {
background-color: pink;
transform: rotateY(-90deg) translateZ(90px);
}
.lt li:nth-child(6) {
background-color: purple;
transform: rotateY(90deg) translateZ(90px);
}
.fg {
width: 600px;
height: 50px;
border: 1px solid black;
margin: 20px auto;
}
.fg li {
width: 100px;
height: 50px;
float: left;
position: relative;
transition: all 1s;
/* 真正实现 3d 效果, 不一定需要加上 perspective */
/* 由于是span做的3d变换, 所以 transform-style: preserve-3d; 加给父盒子li*/
transform-style: preserve-3d;
}
.fg li:hover {
transform: rotateX(-90deg);
}
.fg li span {
width: 100px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}
.fg li span:nth-child(1) {
background-color: blue;
transform: translateZ(25px);
}
.fg li span:nth-child(2) {
background-color: pink;
transform: rotateX(90deg) translateZ(25px);
}
</style>
</head>
<body>



<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>

<ul class="lt">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<ul class="fg">
<li>
<span>吃饭了吗</span>
<span>1</span>
</li>
<li>
<span>吃饭了吗</span>
<span>2</span>
</li>
<li>
<span>吃饭了吗</span>
<span>3</span>
</li>
<li>
<span>吃饭了吗</span>
<span>4</span>
</li>
<li>
<span>吃饭了吗</span>
<span>5</span>
</li>
<li>
<span>吃饭了吗</span>
<span>6</span>
</li>
</ul>
</body>
</html>

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
/* 一般设置给整个3d整体的父级 */
/* perspective: 1000px; */
transform-style: preserve-3d;
}
.father {
width: 120px;
height: 200px;
border: 1px solid #000;
margin: 10px auto;
position: relative;
/* 父元素Y轴偏移一点 否则看不出效果 */
transform: rotateY(26deg);
/* perspective 只是使子盒子拥有近大远小的视觉效果 */
/* perspective: 1000px; */
/* 真正实现3d transform-style: preserve-3d 实现的 */
/* 默认值 flat 表示平面布局 */
/* preserve-3d 是我们真正使得子盒子按三维立体进行布局, 一定要加给父元素 */
transform-style: preserve-3d;
}
.son1,
.son2 {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 200px;
}
.son1 {
background-color: blue;
}
.son2 {
background-color: red;
transform: rotateX(45deg);
}
.lt {
width: 180px;
height: 180px;
border: 1px solid #000;
margin: 60px auto;
position: relative;
transition: all 5s;
transform-style: preserve-3d;
}
.lt:hover {
/* XYZ都旋转 */
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
.lt li {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.lt li:nth-child(1) {
background-color: blue;
transform: translateZ(90px);
}
.lt li:nth-child(2) {
background-color: blueviolet;
transform: rotateX(90deg) translateZ(90px);
}
.lt li:nth-child(3) {
background-color: brown;
transform: rotateX(180deg) translateZ(90px);
}
.lt li:nth-child(4) {
background-color: chartreuse;
transform: rotateX(270deg) translateZ(90px);
}
.lt li:nth-child(5) {
background-color: pink;
transform: rotateY(-90deg) translateZ(90px);
}
.lt li:nth-child(6) {
background-color: purple;
transform: rotateY(90deg) translateZ(90px);
}
.fg {
width: 600px;
height: 50px;
border: 1px solid black;
margin: 20px auto;
}
.fg li {
width: 100px;
height: 50px;
float: left;
position: relative;
transition: all 1s;
/* 真正实现 3d 效果, 不一定需要加上 perspective */
/* 由于是span做的3d变换, 所以 transform-style: preserve-3d; 加给父盒子li*/
transform-style: preserve-3d;
}
.fg li:hover {
transform: rotateX(-90deg);
}
.fg li span {
width: 100px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}
.fg li span:nth-child(1) {
background-color: blue;
transform: translateZ(25px);
}
.fg li span:nth-child(2) {
background-color: pink;
transform: rotateX(90deg) translateZ(25px);
}
</style>
</head>
<body>
<!-- transform-style -->
<!-- transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性也是给父元素添加。 -->
<!-- 一个3d元素可以没有perspective，但是不能没有transform-style -->
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<!-- 立体案例 -->
<ul class="lt">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 翻滚 -->
<ul class="fg">
<li>
<span>吃饭了吗</span>
<span>1</span>
</li>
<li>
<span>吃饭了吗</span>
<span>2</span>
</li>
<li>
<span>吃饭了吗</span>
<span>3</span>
</li>
<li>
<span>吃饭了吗</span>
<span>4</span>
</li>
<li>
<span>吃饭了吗</span>
<span>5</span>
</li>
<li>
<span>吃饭了吗</span>
<span>6</span>
</li>
</ul>
</body>
</html>

animation动画
animation是一个复合属性，一共有8个参数;
一般是由@keyframes先定义动画，然后animation使用动画。
1.animation-name:动画名称，由@keyframes定义的
2.animation-duration：动画的持续时间
3.animation-timing-function：动画的过渡类型
4.animation-delay：动画的延迟时间
5.animation-iteration-count：动画的循环次数
6.animation-direction：设置动画在循环中是否反向运动
7.animation-fill-mode：设置动画时间之外的状态
8.animattion-play-state:设置动画的状态。

案例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
}
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: red;
box-shadow: 0px 0px 4px 4px #fff;
/* 使用动画 */
/* animation: myAnimaiton 2s infinite; */
/* 1. 动画名称 */
animation-name: myAnimaiton;
/* 2. 动画执行时间 */
animation-duration: 2s;
/* 3. 动画执行次数 */
/*animation-iteration-count: 2;*/
/* infinite 无限次 */
animation-iteration-count: infinite;
/* 4. 延迟时间 */
/*animation-delay: 1s;*/
/* 5. 动画效果 */
/* animation-timing-function: linear; */
/* steps(n) 按照步数执行, 可以用来实现帧动画 */
/* animation-timing-function: steps(3); */
/* 6. 动画方向 */
/* alternate 交替执行, 可以让动画序列来回交替执行 */
/* animation-direction: alternate; */
/* 7. 动画最终状态 forwards 停留在最终动画状态 */
/*animation-fill-mode: forwards;*/
}
div:hover {
/* 8. 动画播放状态 */
animation-play-state: paused;
}
/* 自定义动画 */
@keyframes myAnimaiton {
0% {
transform: scale(1.0)
}
100% {
transform: scale(1.5)
}
}
</style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #000;
}
div {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: red;
box-shadow: 0px 0px 4px 4px #fff;
/* 使用动画 */
/* animation: myAnimaiton 2s infinite; */
/* 1. 动画名称 */
animation-name: myAnimaiton;
/* 2. 动画执行时间 */
animation-duration: 2s;
/* 3. 动画执行次数 */
/*animation-iteration-count: 2;*/
/* infinite 无限次 */
animation-iteration-count: infinite;
/* 4. 延迟时间 */
/*animation-delay: 1s;*/
/* 5. 动画效果 */
/* animation-timing-function: linear; */
/* steps(n) 按照步数执行, 可以用来实现帧动画 */
/* animation-timing-function: steps(3); */
/* 6. 动画方向 */
/* alternate 交替执行, 可以让动画序列来回交替执行 */
/* animation-direction: alternate; */
/* 7. 动画最终状态 forwards 停留在最终动画状态 */
/*animation-fill-mode: forwards;*/
}
div:hover {
/* 8. 动画播放状态 */
animation-play-state: paused;
}
/* 自定义动画 */
@keyframes myAnimaiton {
0% {
transform: scale(1.0)
}
100% {
transform: scale(1.5)
}
}
</style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

动画库的使用
一个用的比较多的动画库animate.css；

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<link rel="stylesheet" href="animate.css">
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
.box {
animation: bounceInRight2 2s infinite alternate;
}
/* 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 */
@keyframes bounceInRight2 {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
</style>
</head>
<body>

<div class="animated bounceInRight">我是引用animate库动画</div>

<div class="box">我是修改animate库动画</div>
</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1. 引入动画函数库 -->
<link rel="stylesheet" href="animate.css">
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
.box {
animation: bounceInRight2 2s infinite alternate;
}
/* 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 */
@keyframes bounceInRight2 {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
</style>
</head>
<body>
<!-- 2. 直接使用设计好的动画库, 直接加类, animated, 选择想要的动画效果 添加效果类 -->
<div class="animated bounceInRight">我是引用animate库动画</div>
<!-- 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 -->
<div class="box">我是修改animate库动画</div>
</body>
</html>