CSS3新特性

CSS3学习

权重计算

css优先级规则

  1. css选择规则的权值不同时，权值高的优先；

  2. css选择规则的权值相同时，后定义的规则优先；

  3. css属性后面加 !important 时，无条件绝对优先；

!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符

img

权值等级划分

一般来说是划分4个等级：

第一等级：代表 内联样式，如 style=””，权值为 1,0,0,0；

第二等级：代表 ID选择器，如 #id=””, 权值为 0,1,0,0；

第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；

第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；

此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；

权值计算公式

权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；

权值比较规则

当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的;【为什么这么特别强调呢，因为为在网上查资料的时候，看到好多博客是把这个权重值理解成了所有等级的数字之和了】，说到这里 再 配合下图 大家应该就差不多理解了。

总结，这个比较规则就是三点

1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推；

2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）；

3.css属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）；

新增选择器

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <style>
        button {
            cursor: pointer;
        }
        /* 类选择器、属性选择器、伪类选择器 权重是10*/
        button[disabled] {
            cursor: default;
        }
        /* 
        ele[attr]
        ele[attr='val']
        ele[attr^='val'] 以val开头
        ele[attr$='val'] 以val结尾
        ele[attr*='val'] 包含val
        */

    </style>
    <button></button>
    <button></button>
    <button disabled></button>
</body>

结构伪类选择器

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
<body>
    <style>
        /* 类选择器、属性选择器、伪类选择器 权重是10*/
        ul li:first-child {
            color: red;
        }
        /* 
        ele:first-child
        ele:last-child
        ele:nth-child(n) //n 可以是even代表偶数 odd代表奇数，n也可以是公式，此时n从0开始 3n 5n n+10, -n+5等等
        ele:first-of-type 指定类型的第一个
        ele:last-of-type
        ele:nth-of-type(n)
        */
        div span:nth-of-type(3) {
            color: green
        }
    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <p>p</p>
        <span>1</span>
        <span>3</span>
        <span>3</span>
    </div>
</body>

nth-child(n) 选择父元素里面的第n个孩子，不分孩子的类型， 可以使用nth-of-type(n)实现

伪元素选择器

-图标的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        /*
        比重是1，本身是个盒子，可以设置样式，默认行内
        before 在元素内容前插入内容，
        after 在元素内容后面插入内容
        */

        div::before {
            content: "你";
            display: inline-block;
            width: 20px;
            height: 10px;
        }

    </style>
    <div>Love</div>
</body>

2D转换

Transform 对 x,y轴进行操作

位移 translate

translate(x,y), translateX(x), translateY(y)

类似于定位

  • 优点不会影响其他盒子的位置
  • 对行内标签没有效果
  • 值可以是百分比，相对于自身的百分比
1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            transform: translate(100px,100px);
        }

    </style>
    <div>Love</div>
</body>

用处：

  • 可以结合动画做鼠标经过的效果

  • 盒子的水平和垂直居中 transform: translate(-50%,-50%);

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
<body>
    <style>
        div {
            position: relative;
            width: 400px;
            height: 400px;
            border: 1px solid red;
            /* transform: translate(100px,100px); */
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*以上设置可以是元素相对于父元素垂直居中*/
            width: 100px;
            height: 100px;
            background-color: green;
        }

    </style>
    <div>
        <p></p>
    </div>
</body>

旋转 rotate

transform: rotate(45deg)

image-20200811184943883

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
<body>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid red;
            /* transform: translate(100px,100px); */
        }

        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.3s;
        }

        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
    <div>
        <p></p>
    </div>
</body>

转换中心点设置transform-origin

transform-origin: x y; //可以是具体数字，百分比，方位名词left/right/top/bottom

用处：可以结合rotate设置遮罩层

缩放scale

scale(x,y)；scale(n)//是数字，是原来大小的倍数

优势：不会影响其他盒子的位子，可以设置中心点

组合

transform:translate() rotate() scale()

  • 顺序会影响转换的效果
  • 组合动画有位移的时候，位移要放在最前面

动画

属性

  • @keyframes //定义动画
  • animation
  • anination-name // 必须
  • animation-duration // 必须
  • animation-timing-function
    • linear 匀速
    • ease 先慢中快后慢
    • ease-in 以低速开始
    • ease-out 以低速结束
    • ease-in-out 低速开始和结束
    • steps() 分步长来分阶段来完成动画， 比如打字机效果
  • animation-delay
  • animation-iteration-count //infinite 无限循环
  • animation-direction //是否反方向运动
  • animation-fill-mode // 默认backwards，回到其实状态，停留在结束状态forwards
  • animation-play-state //播放状态 是否暂停动画
    • paused
    • running
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
<style>
/*定义动画*/
@keyframes name {
    0% {
        /*样式*/
    }
    100% {
        /*样式*/
    }
}
@keyframes name {
    from {
        /*样式*/
    }
    to {
        /*样式*/
    }
}
/*
0%和100%叫做动画序列，0%是动画开始，100%是动画结束, 中间可以自定义动画序列
from..to从0到100
animation: name duration timing-function delay iteration-count direction fill-mode
*/
/*调用动画*/

div {
    animation-name: name;
    animation-duration: 2s;
}
</style>

案例

打字机效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            font-size: 20px;
            width: 0px;
            height: 30px;
            animation: w 2s steps(6) forwards;
        }
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 120px;
            }
        }
    </style>
    <div>
        你好，明天。
    </div>
</body>

奔跑的小熊

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
<body>
    <style>
        div {
            position: absolute;
            overflow: hidden;
            font-size: 20px;
            width: 30px;
            height: 30px;
            background: url(imgs/bear.png) no-repeat;
            /* 给一个元素添加多个动画 */
            animation: bear 2s steps(8) forwards, move 3s;
        }
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
    <div>
    </div>
</body>

3D转换

3D位移

translate3d(x,y,z) translateX(n) translateX(n) translateX(10px)

3D旋转

rotate3d(x,y,x,deg)

透视

perspective 子box做3D动画，给父元素加透视

3D呈现

transform-style 当父BOX做3D动画的时候，保持子BOX的3D效果

案例：

旋转木马

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
<body>
    <style>
        body {
            perspective: 1200px;
        }
        section {
            position: relative;
            width: 200px;
            height: 257px;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }

        section:hover {
            animation-play-state: paused;
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(123.png) no-repeat;
        }

        @keyframes rotate {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        section div:nth-child(1) {
            transform: rotateY(0deg) translateZ(300px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

浏览器私有前缀

私有前缀

  • -moz- firefox
  • -ms- ie
  • -webkit safari chrome
  • -o- opera
1
2
3
4
5
6
<style>
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
</style>

动画过渡

transition: all .3s;

技巧

文字居中对齐

m {text-align: center; line-height: $width}}

图片居中

img {vertical-align: middle;} (图片默认和文字的基线对齐)

网页前端 > css3
#css3
CSS3新特性
http://example.com/2021/10/25/CSS3/
作者
John Doe
发布于
2021年10月25日
许可协议