CSS 常用样式
海边的小溪鱼 2022-07-14 CSS
常用 CSS 样式汇总，包含 CSS3 新特性
# CSS 常用样式
- 行内/行内块元素的常用样式
- 1. 清除 a 链接下划线（text-decoration: none）
- 2. 清除 em 和 i 斜体样式（font-style: normal）
- 3. 取消 input 和 button 点击时候出现蓝色边框的问题（outline: none）
- 4. 清除 li 默认前面小圆点样式（list-style: none）
- 5. 防止拖拽文本域（resize: none）
- 6. 解决 img 图片底侧有空白缝隙的问题（vertical-align: middle）
- 7. 设置文字间的距离（letter-spacing:15px）
- 8. 文字阴影（text-shadow）
- 9. 行内元素/行内块元素/文字图片的居中方式（text-align: center）
- 10. 行内元素/行内块元素/文字图片的对齐方式（vertical-align）
- 11. 单行文本溢出显示省略号
- 12. 多行文本溢出显示省略号
- 13. 解决使用 css转换/动画 时可能会有页面闪烁的问题
- 14. 图片/背景图片大小自适应填满盒子（object-fit/background-size: cover）
- 15. input 输入框中的提示文字样式(placeholder的字体样式)
- 15. CSS 初始化代码
- 文字特殊效果
- 常用特殊效果
- CSS 常用属性（含CSS3特性）
- CSS3（新特性）
- CSS 变量（:root）
# 行内/行内块元素的常用样式
# 1. 清除 a 链接下划线（text-decoration: none）
text-decoration: none;
1
# 2. 清除 em 和 i 斜体样式（font-style: normal）
font-style: normal;
1
# 3. 取消 input 和 button 点击时候出现蓝色边框的问题（outline: none）
outline: none;
1
# 4. 清除 li 默认前面小圆点样式（list-style: none）
list-style: none;
1
# 5. 防止拖拽文本域（resize: none）
resize: none;
1
# 6. 解决 img 图片底侧有空白缝隙的问题（vertical-align: middle）
vertical-align: middle;
1
# 7. 设置文字间的距离（letter-spacing:15px）
letter-spacing:15px;
1
# 8. 文字阴影（text-shadow）
text-shadow: 1px 1px 10px 1px rgba(0,0,0,.3);
1
# 9. 行内元素/行内块元素/文字图片的居中方式（text-align: center）
text-align: center;（水平居中）
line-height: 50px;（垂直居中，值为盒子本身的高度）
1
2
2
# 10. 行内元素/行内块元素/文字图片的对齐方式（vertical-align）
使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐
注意：只对行内/行内块元素、表格单元格元素生效（不能用它垂直对齐块级元素）
vertical-align: baseline（默认，基线对齐） | top（顶线） | middle（中线） | bottom（底线）
1
# 11. 单行文本溢出显示省略号
<html>
<body>
<div class="box">
对未就业毕业生“一人一策”提供不断线帮扶服务。实施好以工代赈。确保零就业家庭至少有一人尽快就业
</div>
</body>
<style>
.box {
width: 150px;
height: 50px;
background-color: green;
overflow: hidden; /*超出的部分隐藏*/
white-space: nowrap; /*强制一行内显示文本*/
text-overflow: ellipsis; /*文字用省略号替代超出的部分*/
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 12. 多行文本溢出显示省略号
<html>
<body>
<div class="box">
对未就业毕业生“一人一策”提供不断线帮扶服务。实施好以工代赈。确保零就业家庭至少有一人尽快就业
</div>
</body>
<style>
.box {
width: 150px;
height: 60px;
background-color: green;
line-height: 30px; /* 多行文本溢出隐藏,建议设置行高 */
/* 方式1 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 显示行数的计算方式：高/行高 */
-webkit-box-orient: vertical; /* 文本排列方向 */
/* text-overflow: ellipsis; 可以不写,默认省略号 */
}
</style>
</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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 13. 解决使用 css转换/动画 时可能会有页面闪烁的问题
Chrome 和 Safari
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
1
2
3
4
2
3
4
webkit内核的浏览器
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
1
2
2
# 14. 图片/背景图片大小自适应填满盒子（object-fit/background-size: cover）
background-size:cover; /* 适用于背景图片 */
object-fit: cover; /* 适用于 img 图片 */
1
2
2
# 15. input 输入框中的提示文字样式(placeholder的字体样式)
<html>
<body>
<input type="text" placeholder="请输入...">
</body>
<style>
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
input:-moz-placeholder {
/* Firefox 18- */
color: red;
}
</style>
</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
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
# 15. CSS 初始化代码
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
/* 让 border 和 padding 不撑大盒子 */
box-sizing:border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
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
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
# 文字特殊效果
# 1. 文字竖着显示（writing-mode）
writing-mode属性
| 属性值 | 中文效果 | 数字效果 | 英文效果 |
|---|---|---|---|
| vertical-lr | 我是竖着显示的文字 | 2020年12月4日星期几? | Hello World |
| vertical-rl | 我是竖着显示的文字 | 2020年12月4日星期几? | Hello World |
<html>
<body>
<div>我是竖着显示的文字</div>
</body>
<style>
div {
height: 100px;
line-height: 30px;
writing-mode: vertical-lr; /* 竖着显示：超出高度时,从左到右排列 */
writing-mode: vertical-rl; /* 竖着显示：超出高度时,从右到左排列 */
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 2. 字母大小写转换（text-transform）
| 属性及值 | 实际效果 | 作用 |
|---|---|---|
| text-transform: uppercase | Hello world | 全部大写 |
| text-transform: lowercase | Hello world | 全部小写 |
| text-transform: capitalize | Hello world | 首字母大写 |
| font-variant: small-caps | Hello world | 首字母大写,其余字体变成小型的大写字母 |
<html>
<body>
<div>Hello world</div>
</body>
<style>
div {
text-transform: uppercase; /* 全部转为大写 */
text-transform: lowercase; /* 全部转为小写 */
text-transform: capitalize; /* 首字母大写 */
font-variant: small-caps; /* 首字母大写,其余字体变成小型的大写字母 */
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 3. 文字渐变效果
我是渐变效果的文字
<html>
<body>
<span>我是渐变效果的文字</span>
</body>
<style>
span {
font-size: 24px;
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4. 文字立体效果
立体效果的文字
<html>
<body>
<span>立体效果的文字</span>
</body>
<style>
span {
color:#fff;
font-size: 24px;
font-weight: bold;
text-shadow:0px 1px 0px #c0c0c0,0px 2px 0px #b0b0b0,0px 3px 0px #a0a0a0,0px 4px 0px #909090,0px 5px 10px rgba(0, 0, 0, 0.6);
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 5. 文字描边
描边效果的文字
<html>
<body>
<h2>描边效果的文字<h2>
</body>
<style>
h2 {
background: -webkit-linear-gradient(red, blue);
/* 背景还可以为图片：做出以图片为底的描边效果 */
/* background: url(""); */
/* 设置webkit-background-clip属性，以文字作为裁剪区域向外裁剪 */
-webkit-background-clip: text;
/* text-stroke-width 和 text-stroke-color 的简写（给文本填充颜色） */
-webkit-text-stroke: 6px transparent;
/* text-stroke 属性常常配合 text-fill-color 一起使用 */
-webkit-text-fill-color: #fff;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 6. 文字模糊
/* 方式1 */
color: transparent;
text-shadow: #111 0 0 5px;
/* 方式2 */
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 7. 更多文字特效
呈现效果如下：
# 常用特殊效果
# 1. 实现毛玻璃效果（backdrop-filter）
<html>
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 300px;
height: 120px;
background: url("http://localhost:8080/background/bg.jpg") no-repeat;
background-size: cover;
}
.box::after {
content: "";
display: block;
width: 50%;
height: 100%;
/* backdrop-filter: blur(15px); */
backdrop-filter:saturate(150%) contrast(50%) blur(5px);
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# CSS 常用属性（含CSS3特性）
# 2. 背景（background）
# 3. 文本/盒子阴影（text-shadow/box-shadow）
# 4. 滤镜（filter）: 模糊、黑白等效果
| 属性和值 | 说明 | 作用 |
|---|---|---|
| : none | 默认值，没有效果 | |
| filter: blur(px) | 单位px，值越大越模糊 | 实现模糊效果 |
| filter: grayscale(%) | 100%则完全黑白 | 实现灰白效果 |
| filter: opacity(%) | 0%则完全透明 | 实现透明效果 |
HTML DOM 参考手册：filter（滤镜） (opens new window)
# 6. 透明（opacity 与 rgba()）
# 7. 文本
# CSS3（新特性）
# 1. 选择器
属性选择器
属性选择器: 属性选择器可以根据元素特定属性来选择元素，这样可以不用借助于类或者id选择器（写法格式如下:）
元素[属性]
元素[属性="属性值"]
元素[属性^="属性值开头相同部分"]
元素[属性&="属性值结尾相同部分"]
元素[属性*="属性值所有相同部分"]
<style>
/* 选择具有 value属性 的 input 元素 */
input[value] {
color: red;
}
/* 选择具有 type属性值=text 的 input 元素 重点*/
input[type="text"] {
color: red;
}
/* 选择具有class属性值是icon开头相同的 div元素 */
div[class^="icon"] {
color: red;
}
/* 选择具有class属性值是data结尾相同的 p元素 */
p[class$="data"] {
color: red;
}
/* 选择具有class属性值是left相同的 span元素 */
span[class*="left"] {
color: red;
}
</style>
<!-- 属性选择器可以选择，具有相同属性的某些元素 -->
<input type="text" value="请输入用户名">
<!-- 属性选择器可以选择，具有相同属性值的某些元素 -->
<input type="text">
<!-- 属性选择器可以选择，class属性值开头相同的某些元素 -->
<div class="icon1">1</div>
<div class="icon2">2</div>
<div class="icon3">3</div>
<div>我是打酱油的</div>
<!-- 属性选择器可以选择，class属性值结尾相同的某些元素 -->
<p class="icon1-data">我是安其拉</p>
<p class="icon2-data">我是安其拉</p>
<p class="icon3-ico">那我是谁？</p>
<!-- 属性选择器可以选择，class属性值所有相同部分的某些元素 -->
<span class="left1-ic">我们都一样</span>
<span class="ic1-left2">我们都一样</span>
<span class="left">我们都一样</span>
<span>我什么都不是</span>
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
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
结构伪类选择器
结构伪类选择器: 主要根据文档结构来选择元素，常用于根据父级选择里面的子元素（写法格式如下:）
- child 使用场景：父级盒子里面只有一种类型的标签（如：ul 里面只有 li 标签，不含其它类型标签）
ul li:first-child（表示选择 ul 里面的，第一个，子元素li）
ul li:last-child（表示选择 ul 里面的，最后一个，子元素li）
ul li:nth-child(2)（表示选择 ul 里面的，第2个，子元素li）
ul li:nth-child(even/odd)（even奇数/odd偶数，表示把 ul 里面 所有的偶数 li 选出来 ）
ul li:nth-child(2n/2n+1/n+5/-n+5)（表达式，2n: 2的倍数,相当于偶数; 2n+1: 相当于奇数） - of-type 使用场景：父级盒子里面不止一种类型的标签（如：ul 里面不仅有 li 标签，还有 a 标签）
ul li:first-of-type（表示选择 ul 里面的，子元素li，第一个）
ul li:last-of-type（表示选择 ul 里面的，子元素li，最后一个）
ul li:nth-of-type(2)（表示选择 ul 里面的，子元素li，第2个）
ul li:nth-of-type(even/odd)（even奇数/odd偶数，表示把 ul 里面 所有的偶数 li 选出来 ）
ul li:nth-of-type(2n/2n+1/n+5/-n+5)（表达式，2n: 2的倍数,相当于偶数; 2n+1: 相当于奇数）
child 与 of-type 的区别：
(1). 它们的用法基本相同
(2). 它们的使用场景不一样
(3). 它们在查找元素时的匹配机制不一样，看如下代码
<section>
<p>of-type指定孩子1（child管你是否指定反正我是1）</p>
<p>of-type指定孩子2（child管你是否指定反正我是2）</p>
<p>of-type指定孩子3（child管你是否指定反正我是3）</p>
<div>of-type指定孩子1（child管你是否指定反正我是4）</div>
<div>of-type指定孩子2（child管你是否指定反正我是5）</div>
<div>of-type指定孩子3（child管你是否指定反正我是6）</div>
</section>
<style>
/*child 在查找元素时的匹配机制：
1.child 会把父盒子里面所有的盒子都排列序号（按照书写顺序从1开始排,不管子元素是否被指定）
2.执行的时候首先看nth-child(2)（第2个孩子），之后再看前面div标签/元素 是否与第二个孩子匹配
3.这里第2个孩子是p标签/元素，不匹配！所以不执行！
*/
section div:nth-child(2) {
background-color: red;
}
/*of-type 在查找元素时的匹配机制：
1.of-type 只会把父盒子里面指定元素的盒子排列序号（如：只给指定的div盒子排序号，从1开始排）
2.执行的时候，首先看div指定的元素，之后再看:nth-of-type(2) 第2个孩子
3.这里第2个孩子是div标签/元素，匹配！执行！
*/
section div:nth-of-type(2) {
background-color: blue;
}
</style>
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
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
伪元素选择器
伪元素选择器: 在某个元素内部的 前面/后面 创建一个行内元素
::before（在指定的元素内部 前面 插入内容）
::after（在指定的元素内部 后面 插入内容）
注意：1. 必须有 content 属性（如：content: "";）2. 伪元素选择器和标签选择器一样，权重为1
<html>
<body>
<div class="box">
<span>插入的内容会在我的前面/后面</span>
</div>
</body>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
/* 在 box 内部的前面插入内容 */
.box::before {
content: ""; /* 必须要有 content 属性 */
display: block; /* 转化为块元素 */
width: 100px;
height: 100px;
background-color: red;
}
/* 在 box 内部的后面插入内容 */
.box::after {
content: "123";
color: #fff;
}
</style>
</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
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
# 2. 2D/3D转换（transform）: 移动、旋转/翻转、缩放、倾斜等效果
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
移动（translate）
| 属性和值 | 说明 | 作用 |
|---|---|---|
| transform: translateX(px) | 左右移动（单位 px 或 %，左负右正） | 左右移动 |
| transform: translateY(px) | 上下移动（单位 px 或 %，上正下负） | 上下移动 |
| transform: translate(x, y) | 定义 2D 转换，复合写法 | 上下左右移动 |
| transform: translate3d(x, y, z) | 定义 3D 转换 | 移动 |
旋转（rotate）
| 属性和值 | 说明 | 作用 |
|---|---|---|
| transform: rotateX(deg) | 180deg: 顺时针旋转160° | 旋转/翻转效果，默认沿着X轴旋转 |
| transform: rotateY(deg) | -180deg: 逆时针旋转180° | 旋转/翻转效果，默认沿着Y轴旋转 |
| transform: rotate(deg) | 定义 2D 转换，复合写法 | 旋转，默认沿着中心点旋转 |
| transform: rotate3d(x, y, z, deg) | 定义 3D 转化 x、y、z的值：可以为 0、1、-1 1表示顺时针旋转 0不旋转 -1逆时针旋转 | 旋转 |
缩放（scale）
| 属性和值 | 说明 | 作用 |
|---|---|---|
| transform: scaleX(0.5) | 宽：缩小一半（0-1：缩小） | 缩放效果 |
| transform: scaleY(2) | 高：放大 2 倍（大于1：放大） | 缩放效果 |
| transform: scale(2) | 宽高：放大 1.2 倍（复合写法） | 缩放效果 |
| transform: scale3d(x, y, z) | 定义 3D 缩放转换 | 缩放效果 |
HTML DOM 参考手册：transform（2D/3D转换） (opens new window)
transform 属性的使用场景有很多，如:
可以搭配 :hover(鼠标经过) 使用，实现缩放等效果;可以搭配 position(定位) 使用，实现元素水平垂直居中; 等等
<html>
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all .5s; /* 过渡 */
}
.box:hover {
transform: scale(1.2); /* 放大 1.2 倍 */
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D转换</title>
<style>
body {
/* 眼睛到屏幕的距离 */
/* 视距写在被观察元素的父盒子上面，数值越大(离眼睛越远)成像越小，数值越小(离眼睛越近)成像越大 */
perspective:200px;
}
.rotateX,.rotateY,.rotateZ {
display: block;
width: 200px;
height: 200px;
margin: 5px auto;
transition: all 5s;
}
.rotateX:hover {
/* 绕着X轴旋转 */
transform: rotateX(180deg);
/* 1表示顺时针旋转 0不旋转 -1逆时针旋转 了解就行*/
/* transform: rotate3d(1,0,0,180deg) */
}
.rotateY:hover {
/* 绕着Y轴旋转 */
transform: rotateY(180deg);
/* 1表示顺时针旋转 0不旋转 -1逆时针旋转 了解就行*/
/* transform: rotate3d(0,1,0,180deg) */
}
.rotateZ:hover {
/* 绕着Z轴旋转 */
transform: rotateZ(180deg);
/* 1表示顺时针旋转 0不旋转 -1逆时针旋转 了解就行*/
/* transform: rotate3d(0,0,1,180deg) */
}
</style>
</head>
<body>
<!--
3D透视：(视距：眼睛到屏幕的距离)
perspective:500px;(单位px,数值越小成像越大，数值越大成像越小)
注意：1.网页中想要看到3d效果必须需要透视 2.视距（3D透视）写在被观察元素的父盒子上面
3D呈现：
transform-style: flat;表示所有子元素在2D平面呈现。
transform-style: preserve-3d;表示所有子元素在3D空间中呈现。
注意：3D呈现写在被观察元素的父盒子上面
3D位移：
transform: translateX(50px);(只在X坐标上移动)
transform: translateY(50px);(只在Y坐标上移动)
transform: translateZ(50px);(只在Z坐标上移动，一般用px单位)
简写：transform:translate3d(x,y,z);(分别在x,y,z坐标上移动)
3D旋转：
transform: rotateX(45deg);(绕着X轴旋转)
transform: rotateY(45deg);(绕着Y轴旋转)
transform: rotateZ(45deg);Z轴坐标(绕着旋转,画圆)
复合写法: transform: rotate3d(x,y,z,a);如： transform: rotate3d(1, 1, 1, 45deg);
x y z可以是0,1,-1,表示旋转轴坐标方向(1表示顺时针旋转 0不旋转 -1逆时针旋转)
a表示旋转角度(旋转的度数),顺时针旋转(正数)逆时针旋转(负数)
-->
<!-- 绕着X轴旋转 -->
<img src="http://localhost:8080/background/bg.jpg" alt="" class="rotateX">
<!-- 绕着Y轴旋转 -->
<img src="http://localhost:8080/background/bg.jpg" alt="" class="rotateY">
<!-- 绕着Z轴旋转 -->
<img src="http://localhost:8080/background/bg.jpg" alt="" class="rotateZ">
</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
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
# 3. 过渡（transition）
过渡动画：是从一个状态渐渐的过渡到另一种状态
我们可以在不使用Flash动画或JavaScrip的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
使用场景：经常和:hover一起搭配使用
| 属性和值 | 说明 |
|---|---|
| transition-property: width | 必须，要过渡的属性（all：表示全部属性） |
| transition-duration: 0.5s | 必须，花费时间（单：秒） |
| transition-timing-function: linear | 运动曲线 ease逐渐慢下来/默认;ease-in加速;ease-out减速;ease-in-out加速后减速;linear匀速 |
| transition-delay: 2s | 何时开始 |
简写：transition: 变化的属性 花费时间 运动曲线 何时开始
例如：transition: width 0.2s ease 0s;
多个属性写法：transition: width 0.2s ease 0s,height 0.2s ease 0s;（如果想写多个属性，利用逗号分割）
<html>
<body>
<div class="box"></div>
</body>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 过渡：一般只写 all 和 花费时间 */
transition: all .5s;
}
/* 搭配 :hover 来使用 */
.box:hover {
width: 450px;
height: 450px;
background-color: red;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 4. 动画（animation）
animation（动画）常用来实现复杂的动画效果
相较于过渡(transition)，动画(animation) 可以实现更多变化，更多控制，连续自动播放等效果。
制作动画分为两步：1.先定义动画 2.再使用(调用)动画
| 属性和值 | 说明 | 作用 |
|---|---|---|
| animation-name: move | 定义动画名称，必须 | 动画名称 |
| animation-duration: 2s | 完成一个周期需要的花费时间，必须 | 花费时间 |
| animation-timing-function: ease | 动画速度曲线，匀速linear/默认ease/分几步steps(5) | 速度曲线 |
| animation-delay: 1s | 动画何时开始 | 何时开始 |
| animation-iteration-count: 2 | 动画循环次数，默认1次，infinite为无限循环 | 循环次数 |
| animation-direction: alternate | 动画是否在下一周期逆向播放,反向alternate/默认normal | 是否反方向 |
| animation-play-state: running | 动画是否正在运行,暂停paused/默认running | 是否暂停 |
| animation-fill-mode: backwards | 动画结束后状态，保持forwards/默认回到原点backwards | 结束后的状态 |
简写：animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 结束后状态;
例如：animation: move 2s linear 0s 2 alternate backwards;
多个动画简写：animation: move 2s,move2 3s;（多个动画用逗号分隔）
暂停动画animation-play-state:paused;经常和鼠标经过等其他配合使用
注意：简写属性不包含 animation-play-state
<html>
<body>
<div class="box"></div>
</body>
<style>
/* 1. 定义动画：动画的名称为 move */
@keyframes move {
/* 开始时的状态 也可以省略不写*/
0% {
transform: translate(0, 0);
}
/* 变化过程 可以划分多次数 可以设置多样式*/
25% {
transform: translate(1000px, 0);
background-color: purple;
}
50% {
transform: translate(1000px, 500px);
background-color: red;
}
75% {
transform: translate(0px, 500px);
background-color: hotpink;
}
/* 结束时的状态 */
100% {
transform: translate(0, 0);
}
}
/* 2. 调用动画 */
.box {
width: 200px;
height: 200px;
background-color: pink;
animation: move 2s linear 2 alternate; /* 调用使用动画 */
}
.box:hover {
animation-play-state: paused; /* 暂停动画 */
}
</style>
</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
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
# 5. 更多特性（文档）
# CSS 变量（:root）
:root是一个伪类选择器，表示文档根元素，所有主流浏览器均支持（除了 IE8 及更早的版本）
:root的作用：声明全局属性,在当前页面可以使用 var() 来引用
<html>
<body>
<div class="box"></div>
</body>
<style>
:root {
--my-width: 200px;
--my-height: calc(var(--my-width) / 2); /* 高度为宽度的50% */
}
.box {
width: var(--my-width);
height: var(--my-height);
background-color: pink;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18