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)
上次更新: 2023-12-26 18:29:08