css3常用
# css3 常用
# 基础概念
1.css全称是什么？
css全称：Cascading Style Sheets，层叠样式表
2.样式表是什么，是由什么组成的？
1. 样式表
2. 样式表是由规则来组成的 （每一个style标签内部的所有规则组成的就是一个样式表，即 <style type="text/css"></style>包括其内部的所有规则就是一个样式表）
3. 规则是由选择器+声明块来组成的（例如 *{} 整体上是一个规则，.test{}也是一个规则）
4. 声明块则是由声明来组成的 （例如：*后面的{}、.test选择器后面的{}）
5. 声明则是由css属性+css属性值所组成的键值对组成（例如：margin: 0;）
3.浏览器读取编译css的顺序是从左往右还是从右往左？
浏览器读取编译css选择器的顺序是从右往左匹配的，这样效率更高。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# css 声明的优先级
css选择器并没有优先级，平常说的css优先级实际上是css声明的优先级
样式的冲突：
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值,此时就发生了样式的冲突
发生样式冲突时，应用哪个样式由css声明的优先级来决定。
当重要声明与非重要声明冲突时，永远是重要声明起作用，即 !important 作用的样式生效，不需要考虑声明的优先级
当重要声明之间发生冲突时，则在重要声明所组成的组中，对规则中非重要声明的优先级进行比较，优先级高的样式起作用
例如：
div{ background:pink !important;} div .test{background:yellow !important}
//此时背景色被渲染成黄色，（div 和 .test选择的是同一个元素）
可以在某一个样式的后边添加 !important ，此时表示为重要声明，则此时该样式会优先被使用，甚至超过内联样式，在开发中要慎用（甚至使用js都无法修改此样式），
但标志为 !important 的声明并没有特殊的特殊性值，不过要于非重要声明分开考虑，其虽然会导致样式被修改，但并不能改变css声明的优先级
css声明的优先级（从高到低）（非重要声明）：
内联样式 （行内样式） 1,0,0,0
ID选择器 （#） 0,1,0,0
类和伪类选择器 （.） 0,0,1,0
元素和伪元素选择器 （元素标签名） 0,0,0,1
通配选择器 （*） 0,0,0,0
继承的样式 没有优先级，0优先级也比没有优先级要高。通配符内部的样式会比继承来的样式优先级高，通配符的样式会优先于继承的样式来生效。
比较优先级时，需要将所有的css声明的优先级进行相加计算，最后优先级越高，越优先显示（分组选择器是单独计算的（例如：div,p,span{}））
选择器的累加不会超过其最大的数量级，即 类选择器再高也不会超过ID 选择器
如果优先级计算后相等。此时则优先使用css样式中靠下的样式，即下面的样式的值会覆盖上面的同样属性的属性值
来源
css样式的来源大致有三种
创作人员（开发人员）
读者（用户）
用户代理 （浏览器），用户代理不存在重要声明
来源的权重（由高到低）：
读者的重要声明（Chrome，火狐等浏览器都没有把读者的重要声明暴露出来，即在这些浏览器中没法定义读者的重要声明，但ie浏览器可以设置）
创作人员的重要声明 （在浏览器的Elements中的element.style中写的带 !important 的样式，等同于写的内联样式中的重要声明，依旧属于开发人员的重要声明）
创作人员的正常声明
读者的正常声明
用户代理的声明
层叠样式表的最终的渲染样式顺序：
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
首先按来源排序
（当声明的来源相同时，）在按选择器的特殊性排序
（当选择器的特殊性相等时，）最终按顺序展示样式（谁的样式在下面被定义，谁的样式被显示）
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
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
# css 选择器
# 基本选择器
基本选择器包括：
通配符选择器 *
id选择器 #
类选择器 .
元素选择器 元素标签名
后代选择器 空格
分组选择器 ，（结合符）
1
2
3
4
5
6
7
2
3
4
5
6
7
# 子元素选择器
> 子元素选择器（直接后代选择器）,使用时需要考虑css属性是否是可继承的
//例如：
.wrap > li {
border: 1px solid;
}
1
2
3
4
5
6
2
3
4
5
6
# 相邻兄弟选择器
+ 相邻兄弟选择器，只会匹配紧跟着的兄弟元素，必须是紧跟着的元素，若紧跟着的兄弟元素不是希望匹配到的选择器所对应的元素,即匹配不到，则不会修改样式。
//例如：
.wrap .first +.inner{
color: pink;
}
1
2
3
4
5
6
2
3
4
5
6
# 通用兄弟选择器
使用 ~ 连接两个元素时，它会匹配第二个元素及其后面的元素，
条件是 : 希望被匹配的元素必须跟（不一定是紧跟）在第一个元素之后，且他们都有一个共同的父元素
//例如：
.wrap {
margin: 50px;
}
.wrap .first ~ .inner {
border: 1px solid;
width: 600px;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 属性选择器--存在和值选择器
存在和值属性选择器（css2）
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。
子串值属性选择器
[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素,(只有以val 开头且和其他值有分割的时候和以val-开头时，才能匹配上)。(css2)
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。(css3)
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。(css3)
[attr*=val] : 选择attr属性的值中包含字符串val的元素。(css3)
//例如：
div[name~="haha"] {
border: 1px solid;
}
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
# 伪类选择器--链接伪类
链接伪类（link visited）只对a标签有用 ，而且缓存中的数据会对结果有影响
:link：表示作为超链接，并指向一个未访问的地址的所有锚
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
身上时,使用的时候需要遵循一个顺序 link visited hover active
注意， :link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符
//例如：
a {
text-decoration: none;
}
a:visited {
color: deeppink;
}
.test:link {
background: pink;
}
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
# 链接伪类 target 练习
//需求：通过点击页面上不同的某个按钮显示不同的对应的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-链接伪类target</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: hotpink;
}
div {
width: 200px;
height: 200px;
background: pink;
display: none;
text-align: center;
font: 50px/200px "微软雅黑";
}
:target {
display: block;
}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</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
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
# 伪类选择器--动态伪类
注意, :hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
隐私与 :visited ,只有下列的属性才能被应用到已访问链接。
允许使用的 CSS 属性为color, background-color, border-color, border-bottom-color, border-left-color,
border-right-color, border-top-color, column-rule-color, 和outline-color。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:visited
//例如：
.wrap:hover {
color: pink;
}
.wrap:active {
color: yellow;
}
.wrap:visited {
color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 伪类选择器--表单伪类
表单相关伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获得焦点的表单
//例如：
input:enabled {
background: red;
}
input:disabled {
background: yellowgreen;
}
input:checked {
width: 200px;
height: 200px;
}
input:focus {
background: #bbb;
}
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
# 伪类选择器--结构性伪类
index的值从1开始计数！
index可以为变量n(只能是n，n的取值为0到正无穷，但是只是n=0时不起作用，2n+1（n=0），这是是可以起作用的，即括号内的最终的值不能为0，但n的取值可以为0)
index可以为even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！
nth-of-type以元素为中心！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not
:empty(内容必须是空的，有空格都不行，有attr没关系)
//例如：
/* .wrap li:nth-child(1) 找到wrap下的所有子元素，并且选中第一个子元素，并且这个子元素必须为li标签 */
.wrap li:nth-child(1) {
color: yellowgreen;
}
/* .wrap li:nth-child(1) 找到wrap下的所有子元素，并且选中第一个li标签的子元素 */
.wrap li:nth-of-type(1) {
color: yellowgreen;
}
/* div下的最后一个a标签元素不设置此样式 */
div >a:not(:last-of-type){
color:red;
}
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
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
# 伪元素选择器
伪元素使用 : 和 :: 均可，但建议使用 ::(注意是英文状态下的)
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始位置
::after 元素的最后位置
before和after必须结合content属性来使用
//例如：
.wrap {
margin: 50px;
}
.wrap::before {
content: "*";
color: red;
display: inline-block;
margin: 50px 2px 0 0;
}
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
# 文本新增样式
# 自定义字体
css3自定义字体： @font-face，可以消除用户对电脑自身字体的依赖，但是不能放到选择器的内部，需要和选择器在同级下定义
font-family:'haha' ，haha为自己定义的字体名字
src: url(./font/BAUHS93.TTF); 为自己定义的字体的url地址
最后在自己需要使用此样式的元素上通过font属性或者font-family属性来使用自己定义的字体即可
自定义字体最后会在服务器上存放，用户使用到的时候去服务器上下载，确保每个用户都可以使用此字体，但坏处是会增加网络负担。
//例如：
@font-face {
font-family: "haha";
src: url(./font/BAUHS93.TTF);
}
.wrap{
font: 50px "haha";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文字阴影
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
默认值： none 可以被继承
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
//例如：
.wrap{
text-align: center;
line-height: 200px;
margin: 200px auto;
border: 1px solid;
font: 100px/200px "微软雅黑";
text-shadow: rgba(42, 120, 69, .5) 10px 10px 10px,pink 20px 20px 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 文字模糊（text-shadow 练习）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-文字模糊</title>
<style type="text/css">
/* 当鼠标悬浮到元素上方时，元素会逐渐模糊，直至消失 */
* {
margin: 0;
padding: 0;
}
.wrap {
font: 100px/200px "微软雅黑";
color: black;
text-align: center;
margin: 200px auto;
}
.wrap:hover{
color: rgba(0, 0, 0, 0);
text-shadow: black 0 0 300px;
/* 1s之后在变化，避免显得太突然 */
transition: 1s;
}
</style>
</head>
<body>
<div class="wrap">啊哈哈哈哈哈哈哈</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
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
# 模糊背景
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
默认值： none 不可被继承
参考链接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: relative;
height: 200px;
background: rgba(105, 105, 45, 0.5);
}
.wrap .bg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url(./img/0000.png) no-repeat;
background-size: 100% 100%;
/* 模糊则通过filter来实现 */
filter: blur(20px);
}
img {
margin: 24px 0 0 24px;
}
</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
28
29
30
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
# 文字排版
CSS属性 direction 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左 (类似希伯来语或阿拉伯语)， ltr 表示从左到右 (类似英语等大部分语言).
初始值 ltr 可继承
direction 属性和 unicode-bidi 属性不受 all 属性影响。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction
//例如：
.wrap{
width: 200px;
height: 200px;
border: 1px solid;
margin: 200px auto;
/* rtl :right to left 从右向左读，注意，必须要配合unicode-bidi使用，此属性才能生效 */
direction: rtl;
unicode-bidi: bidi-override;
}
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
# 文字溢出显示省略号
.wrap {
width: 200px;
height: 200px;
border: 1px solid;
/* 一行文本溢出显示省略号必须要写下面四个属性，这四个属性缺一不可 */
/* display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; */
/* 让两行以后溢出的文字显示省略号 */
/* -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），
它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
*/
display: -webkit-box;
/* 注意，此时不能设置display: block; ，设置为块级元素会导致下面的配置失效 */
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
/* -webkit-line-clamp: 行数; */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
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
# 盒子模型
# 盒模型阴影
box-shadow 用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。
该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
默认值：none 不可被继承
可选值：
inset :默认阴影在边框外，使用inset后，阴影在边框内
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
//例如：
.wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
border: 1px solid;
background: pink;
box-shadow: inset 10px 10px 10px 10px black ;
}
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
# box-sizing
/* 需求：输入框的宽度为200px，并且需要让input在输入和显示的时候，光标左右的padding为50px*/
若不加下面的box-sizing属性，则会导致整个input框的宽度变成300px，因为padding会直接加在内容区上，
加上box-sizing: border-box;则可以避免出现此类现象，让整个内容区的宽度为200px，即使设置了padding，也只会导致里面的内容显示区域变小，内容区整体大小是不会改变的
box-sizing： 默认值content-box，不可被继承
可选值：
content-box ：默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部，此时元素上设置的width和height表示的是content-box的尺寸。
border-box： width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型，此时元素上设置的width和height表示的是border-box的尺寸。
input{
width: 200px;
padding: 0 50px;
box-sizing: border-box;
/* outline: 0; 去掉聚焦事件时的黑色边框 */
outline: 0;
}
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
# 新增 UI 样式
# 圆角
border-radius 允许设置元素的外边框圆角。
该属性是一个 简写属性，
是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
border-radius 默认值为0，不可被继承
可选值：
<length> 定义圆形半径或椭圆的半长轴，半短轴。负值无效。
<percentage>使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 圆角练习-风车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-风车示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 400px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 4s;
}
.wrap > div {
margin: 10px;
width: 180px;
height: 180px;
background: #bfa;
float: left;
box-sizing: border-box;
border: 1px solid;
}
.wrap > div:nth-child(1),
.wrap > div:nth-child(4) {
border-radius: 0 60%;
}
.wrap > div:nth-child(2),
.wrap > div:nth-child(3) {
border-radius: 60% 0;
}
.wrap:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></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
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
# 边框图片
border-image-source 定义一张图片来代替边框样式，如果为none，则仍然使用border-style定义的样式
默认值：none 不可被继承
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-source
通过border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image-slice
.wrap {
height: 200px;
width: 200px;
border: 30px solid;
border-image-source: url(./img/border-image.png);
border-image-slice: 33.3333333333333% ;
border-image-repeat: repeat;
border-image-width: 20px;
border-image-outset: 10px;
}
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
# css2 背景
.wrap {
height: 400px;
width: 400px;
background-color: pink; /* 平铺整个border-box */
background-image: url(./img/0000.png); /* 默认从padding-box开始绘制，从border-box开始裁剪 css3中有多背景，默认绘制时尺寸是自己的位图像素 */
/* background-position 百分比的参照值：参照尺寸为背景图片定位区域的大小减去背景图片的大小 */
background-position: -100px -10px; /* 控制背景图片在背景区域中的位置，可以是px值，也可以是百分比，百分比参照的是背景区域减去背景图片的位图像素值 */
background-repeat: no-repeat; /* 控制是否平铺 */
background-attachment: scroll; /* scroll：默认值，背景图不会随着元素滚动条的滚动而滚动，fixed：背景图铺在视口中，相当于是固定定位了 */
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# css3 背景
.wrap {
width: 800px;
height: 800px;
border: 1px solid;
/* 默认情况下背景图片是从padding-box开始绘制的，从border-box开始裁剪 */
background-image: url(./img/0000.png);
background-repeat: no-repeat;
/* css3新增属性有以下： */
background-origin: content-box;
background-clip: padding-box;
background-size: 100% 100%; /* 需要注意的是，图片是自适应的，如果需要铺满，则要设置为100% 100% */
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 渐变
# 线性渐变
.wrap {
width: 1000px;
height: 200px;
border: 1px solid;
margin: 0 auto;
/* 基础的红黄绿三色渐变 */
/* background-image: linear-gradient( red,yellow,green); */
/* 改变方向的 */
/* background-image: linear-gradient(to top, red,yellow,green); */
/* 控制角度的渐变 */
/* background-image: linear-gradient(45deg, red,yellow,green); */
/* 控制颜色节点的渐变 */
/* background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%); */
/* 透明度的渐变 */
/* background-image:linear-gradient(90deg,rgba(25,25,0,.2) 40%,rgba(255,0,0,0.5) 70%,rgba(255,0,0,1) 850%); */
/* 重复渐变 */
background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 10%, rgba(0,0,0,1) 30%);
}
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
# 径向渐变
radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。
它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS<gradient>数据类型的对象，其是 <image> 的一种。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient()
.wrap {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient( farthest-corner circle , yellow, green 50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 渐变练习-发廊灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-发廊灯实例</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
margin: 300px auto;
width: 40px;
height: 400px;
border: 1px solid;
overflow: hidden;
}
.wrap > .inner {
height: 900px;
background: repeating-linear-gradient(
135deg,
black 0px,
black 10px,
white 10px,
white 20px
);
}
.wrap:hover .inner {
margin-top: -400px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
let inner = document.querySelector(".wrap > .inner");
let flag = 0;
setInterval(function () {
flag++;
if (flag === 300) {
flag = 0;
}
inner.style.marginTop = -flag + "px";
}, 1000 / 120);
</script>
</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
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
# 渐变练习-光斑动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-实例光斑动画</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
background: black;
text-align: center;
}
.wrap {
margin: 100px 0 0 0;
display: inline-block;
color: rgba(255, 255, 255, 0.3);
font: bold 80px "微软雅黑";
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 100px,
rgba(255, 255, 255, 1) 180px,
rgba(255, 255, 255, 0) 260px
);
-webkit-background-clip: text;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="wrap">哈哈哈哈，俺来也</div>
</body>
<script type="text/javascript">
let wrap = document.querySelector(".wrap");
let flag = -160;
setInterval(function () {
flag += 20;
if (flag === 800) {
flag = -160;
}
wrap.style.backgroundPosition = flag + "px";
}, 40);
</script>
</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
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
# 过渡
# 过渡属性&周期
过渡只关心元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
transition 属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。
transition 提供了一种在更改css属性时控制动画速度的方法，其可以让属性变化为一个持续一段时间的过程，而不是立即生效。
transition 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
默认值：transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease ，不可被继承
transition-property 指定应用过渡属性的名称。
默认值 all 不可被继承
可选值：（可以指定多个property）
none：没有过渡动画
all：所有可被动画的属性都表现出过渡动画。
可被动画的属性参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
IDENT: 属性名称（可指定多个）。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-property
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
可以指定多个时长(时长之间用逗号隔开)，每个时长会被应用到由 transition-property 指定的对应属性上。
如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变。
transition-duration 属性的默认值为0s ，不可被继承
属性值：
time:以秒或毫秒为单位的数值
<time> 类型。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是 0s ，表示不会呈现过渡动画，属性会瞬间完成转变。不接受负值。
一定要加单位（不能为0,一定要写0s 1s 100ms等）
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration
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
# 过渡运动形式&延迟
CSS属性受到 transition effect的影响，会产生不断变化的中间值，而 CSS transition-timing-function 属性用来描述这个中间值是怎样计算的。
实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
transition-timing-function 属性： 初始值 ease 不可被继承
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
属性值：
1、ease：（加速然后减速）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier： 贝塞尔曲线
7、step-start：等同于steps(1,start)
step-end：等同于steps(1,end)
steps(,[,[start|end]]?)
第一个参数：必须为正整数，指定函数的步数
第二个参数：指定每一步的值发生变化的时间点（默认值end）
transition-delay 属性规定了在过渡效果开始作用之前需要等待的时间。
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性（transition-property）
初始值 0s ，不可被继承
可以指定多个延迟时间，每个延迟将会分别作用于你所指定的相符合的css属性。如果指定的时长个数小于属性个数，那么时长列表会重复。
如果时长列表更长，那么该列表会被裁减。两种情况下，属性列表都保持不变
属性值
值以秒（s）或毫秒（ms）为单位，表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。
.wrap {
width: 200px;
height: 200px;
background: pink;
text-align: center;
font: 50px/200px "微软雅黑";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transition-property: width;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 1s;
}
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
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
# 过渡完成事件
let bodyNode = document.querySelector("body");
let wrapNode = document.querySelector(".wrap");
// dom0事件
bodyNode.onmouseover = function () {
wrapNode.style.width = "100px";
wrapNode.style.height = "100px";
};
// dom2事件
// 当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd
// 每一个拥有过渡的属性在其完成过渡时都会触发一次transitionend事件
// 在transition完成前设置 display: none，事件同样不会被触发
wrapNode.addEventListener('transitionend',function(){
alert('over')
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 过渡中的坑
过渡只关心元素的初始状态和结束状态，没有方法可以获取元素在过渡中每一帧的状态
transition 在元素首次渲染还没有结束的情况下是不会被触发的，即页面整体的首次渲染时并不会执行transition
1
2
3
2
3
# 过渡简写属性
css 过渡由简写属性transition 定义是最好的方式，可以避免属性值列表长度不一 ，节省调试时间
在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给transition-duration（过渡时间），第二个可以解析为时间的值会被赋值给transition-delay(延迟时间)
推荐书写顺序
过渡时间（transition-duration） 过渡属性名称（transition-property ） 过渡形式（transition-timing-function） 延迟时间 , 过渡时间 过渡属性名称 过渡形式 延迟时间 , 。。。。。。
1
2
3
4
5
2
3
4
5
# 2D 变换
# 旋转 rotate
transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的，transform属性只对 block 块级元素有效。
rotate 属性值允许你单独设置transform的旋转属性。
默认值为 none 不可被继承
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/rotate
//例如：
.test {
width: 200px;
height: 200px;
background: #bfa;
text-align: center;
font: 40px/200px "微软雅黑";
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
transition: 2s;
}
.wrap:hover .test {
transform: rotate(180deg);
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 平移 translate
translate 属性 允许你单独声明平移变换，并独立于 transform 属性。
默认值 none 不可被继承
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 倾斜 skew
skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个<transform-function> 数据类型
这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；
因此，一个点离原点越远，其增加的值就越大。
skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。参数值以deg为单位
skew(ax, ay) ax 表示用于沿横坐标扭曲元素的角度,X方向倾斜，代表与y轴之间的角度。
ay 表示用于沿纵坐标扭曲元素的角度,Y方向倾斜，代表与x轴之间的角度。如果未定义，则其默认值为0，导致纯水平倾斜，在Y轴上没有倾斜。
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变
正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角
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
# 缩放 scale
scale 属性 允许你可以分别且独立地指定CSS属性 transform 缩放的比例。这更好地映射到典型的UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。
单一数值
单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放，相当于指定了单个值的scale()(2D缩放)函数。
两个长度/百分比值
两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。
三个长度/百分比值
三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。
none
指定不进行缩放。
默认值为none 不可被继承
transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)
正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);
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
# 基点变换 transform-origin
transform-origin 属性让你更改一个元素变形的原点。原点的改变对平移不会产生影响，平移是参照与原来的位置进行的平移
默认值 50% 50% 0 不可被继承
transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。 没有明确定义的偏移将重置为其对应的初始值。
如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。
一个值：
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
两个值：
其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是<length>。它始终代表Z轴偏移量。
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
# 矩阵
CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。
角度转换为弧度
Math.PI = π
角度 * π / 180
.wrap:hover .test {
/* transform: matrix(1, 0, 0, 1, 200, 0); */ /* 平移200px*/
transform: matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, 0, 0); /* 旋转45度*/
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 变换组合
变换在组合的时候计算方向是从右往左进行计算的，所以在组合的时候需要注意，变换的底层就是矩阵的计算
1
# 2D 变换练习-扇形导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-2D变形-扇形导航练习</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
width: 50px;
height: 50px;
/* border: 1px solid; */
position: absolute;
right: 20px;
bottom: 20px;
}
.wrap > .inner {
height: 100%;
}
.wrap > .inner > img {
position: absolute;
left: 0;
top: 0;
margin: 4px;
border-radius: 50%;
}
.wrap > .home {
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 100%;
width: 100%;
background: url("./img/home.png") no-repeat;
border-radius: 50%;
transition: 2s;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<img src="./img/clos.png" />
<img src="./img/full.png" />
<img src="./img/open.png" />
<img src="./img/prev.png" />
<img src="./img/refresh.png" />
</div>
<div class="home"></div>
</div>
</body>
<script type="text/javascript">
// 1. 在元素首次渲染还没有完成的情况下，是不会触发过渡的
// 2. 在绝大多数变换样式切换中，如果变换组合的位置或个数不一样时，也是不会触发过渡的
window.onload = function () {
let homeEle = document.querySelector(".home");
var imgs = document.querySelectorAll(".wrap > .inner > img");
let flag = true;
let c = 140;
homeEle.onclick = function () {
if (flag) {
this.style.transform = "rotate(-720deg)";
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.transition = " 1s " + i * 0.1 + "s";
imgs[i].style.transform = "scale(1) rotate(-720deg)";
imgs[i].style.left =
-getPoint(c, (90 * i) / (imgs.length - 1)).left + "px";
imgs[i].style.top =
-getPoint(c, (90 * i) / (imgs.length - 1)).top + "px";
}
} else {
this.style.transform = "rotate(0deg)";
for (let i = 0; i < imgs.length; i++) {
imgs[i].style.transition =
" 1s " + (imgs.length - i - 1) * 0.1 + "s";
imgs[i].style.transform = "scale(1) rotate(0deg)";
imgs[i].style.left = 0 + "px";
imgs[i].style.top = 0 + "px";
}
}
flag = !flag;
};
//已知一个直角三角形中的斜边和其中一个角，求另外两边的长度
function getPoint(c, deg) {
let xx = Math.round(c * Math.sin((deg * Math.PI) / 180));
let yy = Math.round(c * Math.cos((deg * Math.PI) / 180));
return { left: xx, top: yy };
}
// 点击图片放大
for (let i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
this.style.transition = "1s";
this.style.transform = "scale(2) rotate(-720deg)";
this.style.opacity = 0.4;
this.addEventListener("transitionend", fn);
};
}
function fn() {
this.style.transition = "0.2s";
this.style.transform = "scale(1) rotate(-720deg)";
this.style.opacity = 1;
this.removeEventListener("transitionend", fn);
}
};
</script>
</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
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
# 2D 变换练习-时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-2D变形-时钟练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%);
}
ul > li {
position: absolute;
left: 99px;
top: 0;
width: 2px;
height: 10px;
background: black;
transform-origin: center 100px;
}
ul > li:nth-child(5n + 1) {
height: 20px;
}
.wrap > .hour {
position: absolute;
left: 97px;
top: 70px;
width: 6px;
height: 30px;
background: black;
transform-origin: center bottom;
}
.wrap > .min {
position: absolute;
left: 98px;
top: 50px;
width: 4px;
height: 50px;
background: gray;
transform-origin: center bottom;
}
.wrap > .second {
position: absolute;
left: 99px;
top: 30px;
width: 2px;
height: 70px;
background: red;
transform-origin: center bottom;
}
.wrap > .icon {
position: absolute;
left: 90px;
top: 90px;
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
}
</style>
</head>
<body>
<div class="wrap">
<ul></ul>
<div class="hour"></div>
<div class="min"></div>
<div class="second"></div>
<div class="icon"></div>
</div>
</body>
<script>
window.onload = function () {
let hourNode = document.querySelector(".wrap >.hour");
let minNode = document.querySelector(".wrap >.min");
let secondNode = document.querySelector(".wrap >.second");
let ulNode = document.querySelector(".wrap > ul");
// 重新创建一个style标签，用于为多个li添加样式
let cssStyleNode = document.createElement("style");
let liHtml = "";
let cssText = "";
for (let i = 0; i < 60; i++) {
liHtml += "<li></li>";
cssText +=
" ul > li:nth-child(" +
(i + 1) +
") {transform: rotate(" +
i * 6 +
"deg);}";
// 注意不能使用单引号，使用单引号会出错
}
ulNode.innerHTML = liHtml;
cssStyleNode.innerHTML = cssText;
document.head.appendChild(cssStyleNode);
move(); // 防止每次刷新页面时页面需要停顿一下，在定时器setInterval之前先调用一次move函数
setInterval(move, 1000);
function move() {
let date = new Date();
let s = date.getSeconds();
let m = date.getMinutes() + s / 60; //为了保证拿到的值是精确地,指针的转动角度需要更加精确
let h = date.getHours() + m / 60;
hourNode.style.transform = "rotate(" + 30 * h + "deg)";
minNode.style.transform = "rotate(" + 6 * m + "deg)";
secondNode.style.transform = "rotate(" + 6 * s + "deg)";
}
};
</script>
</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
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
# 3D 变换
# 景深 perspective
景深 让3D场景有近大远小的效果（肉眼距离屏幕的距离）
方式一：perspective: 800px;
perspective属性 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。
默认值为none 不可被继承，但它可以作用于后代元素（不是作用于本身的）
且景深属性需要设置给外层元素，相当于给内层需要变换的元素提供一个舞台
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective
方式二：transform: perspective(depth); 此时作用于本身，若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略
depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
这种方式因为限制有点多，不太常用。
景深的原理：
景深越大，灭点越远，元素变形更小
景深越小，灭点越近，元素变形更大
景深叠加会导致出现问题，应该尽可能避免叠加，每个浏览器的叠加的规则是不同的，只能尽可能避免
perspective-origin 指定了观察者的位置，用作 perspective 属性的消失点。
默认值为 50% 50% 百分比参照于盒模型 不可被继承
perspective-origin 用于控制 x y轴上的基点
perspective 用于控制 z 轴上的基点
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
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
# 平移 translate
translateZ 不能写百分比，其没有参照，translateX translateY 可以写百分比，参照的是盒模型的宽高
.wrap:hover .inner {
/* transform: translateX(100px); */
/* transform: translateY(100px); */
/* transform: translateZ(100px); */
transform: translate3d(50%, 50%, 0);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 旋转 rotate
CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。
.wrap:hover .inner {
/* transform: rotateX(360deg); */
/* transform: rotateY(360deg); */
/* transform: rotateZ(360deg); */
/* transform: rotate3d(1, 0, 0, 90deg); */
transform: rotate3d(1, 2, -1, 192deg);
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 缩放 scale
.wrap:hover .inner {
/* transform: scaleZ(2); */
/* transform: scaleX(2) translateZ(100px); */
/* transform: scaleY(2) translateZ(100px); */
/* transform: scaleZ(2) translateZ(100px); */
transform: scale3d(2,2,2) translateZ(100px);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# transform-style
transform-style 属性 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面，元素的子元素将不会有 3D 的遮挡关系。
初始值 flat 不可被继承（但作用于子元素）
可选值：
flat 设置元素的子元素位于该元素的平面中。
preserve-3d 指示元素的子元素应位于 3D 空间中。
1
2
3
4
5
6
2
3
4
5
6
# 3D 变换练习-立方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-3D变换-入门Demo立方体</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
border: 1px solid;
margin-left: -250px;
margin-top: -250px;
perspective: 200px;
transform-style: preserve-3d;
}
.wrap > .inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
/* background: pink; */
transition: 3s;
transform-style: preserve-3d;
transform-origin: center center -50px;
}
.wrap > .inner > div {
position: absolute;
width: 100px;
height: 100px;
background: #bfa;
text-align: center;
font: 40px/100px "微软雅黑";
}
.wrap > .inner > div:nth-child(5) {
transform-origin: bottom;
transform: rotateX(90deg);
top: -100px;
}
.wrap > .inner > div:nth-child(6) {
transform-origin: top;
transform: rotateX(-90deg);
bottom: -100px;
}
.wrap > .inner > div:nth-child(3) {
transform-origin: right;
transform: rotateY(-90deg);
left: -100px;
}
.wrap > .inner > div:nth-child(4) {
transform-origin: left;
transform: rotateY(90deg);
right: -100px;
}
.wrap > .inner > div:nth-child(2) {
transform: translateZ(-100px) rotateX(180deg);
}
.wrap > .inner > div:nth-child(1) {
z-index: 1;
}
.wrap:hover .inner {
transform: rotate3d(1, 1, 1, 720deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div>前1</div>
<div>后2</div>
<div>左3</div>
<div>右4</div>
<div>上5</div>
<div>下6</div>
</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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-3D变换-立方体-主流版本</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border: 1px solid;
margin-left: -200px;
margin-top: -200px;
perspective: 200px;
background: #bfa;
}
.wrap > .inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transition: 3s;
transform-style: preserve-3d;
transform-origin: center center -50px;
}
.wrap > .inner > div {
position: absolute;
width: 100px;
height: 100px;
background: pink;
text-align: center;
font: 40px/100px "微软雅黑";
transform-origin: center center -50px;
backface-visibility: hidden;
}
.wrap > .inner > div:nth-child(6) {
transform: rotateX(270deg);
}
.wrap > .inner > div:nth-child(5) {
transform: rotateX(90deg);
}
.wrap > .inner > div:nth-child(4) {
transform: rotateY(90deg);
}
.wrap > .inner > div:nth-child(3) {
transform: rotateY(270deg);
}
.wrap > .inner > div:nth-child(2) {
transform: rotateY(180deg) rotate(180deg);
}
.wrap:hover .inner {
transform: rotateX(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div>前1</div>
<div>后2</div>
<div>左3</div>
<div>右4</div>
<div>上5</div>
<div>下6</div>
</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
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
# 3D 变换练习-三棱柱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-3D变换-三棱柱</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
n边形的外角和为360度，每个外角为 360/n
n边形的每个内角为 (180 - 360/n)
*/
.wrap {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border: 1px solid;
margin-left: -200px;
margin-top: -200px;
perspective: 200px;
background: #bfa;
}
.wrap > .inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
transition: 3s;
transform-style: preserve-3d;
transform-origin: center center -28.867513459481287px;
}
.wrap > .inner > div {
position: absolute;
width: 100px;
height: 150px;
background: pink;
text-align: center;
font: 40px/150px "微软雅黑";
transform-origin: center center -28.867513459481287px;
backface-visibility: hidden;
}
.wrap > .inner > div:nth-child(3) {
transform: rotateY(240deg);
}
.wrap > .inner > div:nth-child(2) {
transform: rotateY(120deg);
}
.wrap:hover .inner {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
</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
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
# 3D 变换练习-多棱柱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>前端小记-3D变换-多棱柱</title>
<style>
* {
margin: 0;
padding: 0;
}
/*
n边形的外角和为360度，每个外角为 360/n
n边形的每个内角为 (180 - 360/n)
*/
html,
body {
height: 100%;
overflow: hidden;
}
.wrap {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
/* border: 1px solid; */
margin-left: -200px;
margin-top: -200px;
perspective: 500px;
}
.wrap > .inner {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 300px;
height: 400px;
transition: 5s transform;
transform-style: preserve-3d;
/* transform-origin: center center -28.867513459481287px; */
}
.wrap > .inner > div {
position: absolute;
width: 300px;
height: 400px;
background: pink;
text-align: center;
font: 40px/400px "微软雅黑";
/* transform-origin: center center -28.867513459481287px; */
backface-visibility: hidden;
}
.wrap:hover .inner {
transform: rotateY(-360deg);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
createPrism(10);
};
//创建多棱柱， n表示多棱柱的棱数
function createPrism(n) {
// 每一个外角
let outDeg = 360 / n;
// 每一个内角
let inDeg = 180 - 360 / n;
let innerNode = document.querySelector(".wrap > .inner");
let styleNode = document.createElement("style");
let cssText = "";
let text = "";
for (let i = 0; i < n; i++) {
text += "<div>" + (i + 1) + "</div>";
cssText +=
".wrap > .inner > div:nth-child(" +
(i + 1) +
") {transform: rotateY(" +
i * outDeg +
"deg);}";
}
innerNode.innerHTML = text;
let innerDivNode = document.querySelector(".wrap > .inner > div");
// 棱长
let prismLength = innerDivNode.offsetWidth;
cssText +=
".wrap > .inner {transform-origin: center center -" +
(prismLength / 2) * Math.tan(((inDeg / 2) * Math.PI) / 180) +
"px;}";
cssText +=
".wrap > .inner >div {transform-origin: center center -" +
(prismLength / 2) * Math.tan(((inDeg / 2) * Math.PI) / 180) +
"px;}";
styleNode.innerHTML = cssText;
document.head.appendChild(styleNode);
}
</script>
</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
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
# 动画
# animation 基础属性
animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。
初始值：none 不可被继承
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-name
1
2
3
4
2
3
4
animation-duration属性指定一个动画周期的时长。
注意，必须带单位，单位为秒(s)或毫秒(ms),负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s
默认值为0s，表示无动画。不可被继承。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-duration
1
2
3
4
5
6
2
3
4
5
6
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function>。
初始值 ease 不可被继承
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到该关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
animation-delay 属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
初始值 0s 不可被继承
0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；
定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。
如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay
1
2
3
4
5
6
7
2
3
4
5
6
7
animation-iteration-count 属性定义动画在结束前运行的次数 可以是1次 无限循环。重复的是关键帧
animation-iteration-count 属性可以指定一个或多个以逗号分隔的值。如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。
infinite : 无限循环播放动画。
<number> ： 动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-iteration-count
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# animation-fill-mode
animation-fill-mode 属性 设置CSS动画在执行之前和之后如何将样式应用于其目标。
none
当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
forwards
目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值。to之后的状态的与to的状态一致。
backwards
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay期间保留此值。 第一个关键帧取决于animation-direction的值。from之前的状态与from的状态保持一致
both
动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# animation-play-state
animation-play-state 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。
默认值：running 不可被继承
可选值：
running
当前动画正在运行。
paused
当前动画已被停止。
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-play-state
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# animation-direction
animation-direction 属性指示动画播放的方向。反转的是关键帧和animation-timing-function
初始值：normal 不可被继承
可选值：
normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse
反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse
反向交替， 反向开始交替
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
若希望元素在做动画时是从from ==》 to ==》from ==》to ==》from，不再一直都是from==》 to 之后直接回到from的位置在做动画运动到to
只需要设置 animation-direction的值为alternate即可。
若想从一开始就想从to开始到from则需要设置animation-direction的值为alternate-reverse即可。
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
# 关键帧@keyframes
关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。
和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。
要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明匹配。
每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。
可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。
其他情况参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
@keyframes move {
0% {
transform: translateY(-100px);
}
50% {
transform: translateY(50px);
}
100% {
transform: translateY(100px);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 多列布局
column-width:用来指定每一栏的宽度,但字与字之间有间隙，实际效果并不符合预期，所以这个一般不建议使用。
column-count:用来指定栏目的列数，即指定要分多少列。
column-gap:用来设置元素列之间的间隔 (gutter) 大小。
可选值：
normal
表示列之间的间隔宽度。在 多列布局 时默认间隔为1em，其他类型布局默认间隔为 0。
<length>
用<length>来定义列之间的间隔大小。而且 <length> 值必须是非负数的。
<percentage>
用<percentage>（百分比）来定义列之间的间隔大小。同样的，<percentage> 值也必须是非负数的。
column-rule属性规定了列与列之间的直线，该简写可以避免单独设置各个 column-rule-* 属性：column-rule-width，column-rule-style 和 column-rule-color。
初始值: column-rule-width: medium ; column-rule-style: none ; column-rule-color: currentcolor
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-rule
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 媒体查询
# 媒体类型
all 所有媒体
screen 彩色屏幕
print 打印预览
1
2
3
2
3
# 媒体属性
浏览器视口尺寸 width （可加max min前缀）
浏览器视口尺寸 height （可加max min前缀）
设备独立像素（pc端：分辨率； 移动端：具体看机器的参数）：device-width （可加max min前缀）
设备像素比（pc端：1； 移动端：具体看机器参数） -webkit-device-pixel-ratio （可加max min前缀，需要加webkit前缀）
orientation portrait竖屏/landscape横屏
1
2
3
4
5
2
3
4
5
# 关键字
and ：代表与的意思，一般用and来连接媒体类型和媒体属性
only ： 和浏览器的兼容性有关，防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式。
在老款的浏览器下
@media only ---> 因为没有only这种设备 规则被忽略
@media screen ---> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询
(,) : 代表或者的意思，对于所有的连接选项只要匹配成功一个就能应用规则
not: 代表取反的意思，
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
完善页面 (opens new window)
上次更新: 2024-11-28 17:23:47