CSS3 动画专题(上)

发表于 更新于 分类于 本文字数： 1.7k 阅读时长 ≈ 6 分钟
这是有关 CSS3 动画的学习笔记。上半部分。主要内容包括：浏览器私有前缀、圆角边框、阴影、渐变、价格选项卡、transform2D。

如果看不见内嵌网页或者连接错误，请刷新。

浏览器私有前缀

CSS3 新特性在实现时，由于不同浏览器的实现方式不同，所以会出现兼容性问题。为了解决这个问题，浏览器厂商会在实现新特性时，加上浏览器私有前缀，以示区别。

  • -webkit-：谷歌、Safari、iOS、Android

  • -moz-：Firefox

  • -ms-：IE

  • -o-：Opera

要使用一些实验性质的 CSS3 属性，需要加上浏览器私有前缀，比如：

1
2
3
4
5
6
7
div{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

上面这个只是为了演示，实际上如今的浏览器都已经支持 border-radius 属性了，所以不需要加上浏览器私有前缀。

为了用户体验与兼容性，有时我们会使用上面这种写法，即先写上浏览器私有前缀，再写上标准写法，这样即使浏览器支持标准写法，也会优先使用标准写法，而不是浏览器私有前缀。

如果需要查询某个属性是否需要加上浏览器私有前缀，可以访问 caniuse 网站。

e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <style>
        div{
            font-size: 25px;
            -webkit-text-stroke: 1px pink;
        }
    </style>
</head>
<body>
    <div>
        Soyo sann ❤️ Love!
    </div>
</body>
</html>
Soyo sann ❤️ Love!
---

圆角边框

border-radius 属性用于设置元素的圆角边框。

语法：

1
2
3
4
border-radius: 10px; // 设置四个角的圆角半径
border-radius: 10px 20px; // 设置左上角和右下角的圆角半径
border-radius: 10px 20px 30px; // 设置左上角、右上角和右下角的圆角半径
border-radius: 10px 20px 30px 40px; // 设置左上角、右上角、右下角和左下角的圆角半径

规律：顺时针方向，左上角开始，分别设置四个角的圆角半径。

阴影

盒子阴影

box-shadow 属性用于设置元素的阴影。

语法：

1
box-shadow: h-shadow v-shadow blur spread color inset;

  • h-shadow：必需，水平阴影的位置，允许负值

  • v-shadow：必需，垂直阴影的位置，允许负值

  • blur：可选，模糊距离

  • spread：可选，阴影的尺寸

  • color：可选，阴影的颜色

  • inset：可选，将外部阴影（outset）改为内部阴影

e.g.

1
2
3
4
5
6
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    box-shadow: 10px 10px 10px 10px #000;
}

文本阴影

text-shadow 属性用于设置文本的阴影。

语法：

1
text-shadow: h-shadow v-shadow blur color;

  • h-shadow：必需，水平阴影的位置，允许负值

  • v-shadow：必需，垂直阴影的位置，允许负值

  • blur：可选，模糊距离

  • color：可选，阴影的颜色

e.g.

1
2
3
4
div{
    font-size: 25px;
    text-shadow: 10px 10px 10px brown;
}
Soyo sann ❤️ Love!

文本阴影可以多次叠加，实现更加丰富的效果。具体使用时使用逗号分隔即可。

渐变 Gradients

线性渐变

linear-gradient() 函数用于设置线性渐变。

语法：

1
linear-gradient(direction, color-stop1, color-stop2, ...);

  • direction：必需，渐变的方向，可以是角度值或者关键字，比如 to left、to right、to top、to bottom、to left top、to right bottom 等等

  • color-stop：必需，渐变的起始颜色和结束颜色，可以是颜色值或者关键字，比如 red、#000、rgb(0, 0, 0)、transparent 等等

e.g.

1
2
3
4
5
div{
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right, red, yellow);
}

径向渐变

radial-gradient() 函数用于设置径向渐变。

语法：

1
radial-gradient(shape size at position, start-color, ..., last-color);

  • shape：可选，渐变的形状，可以是 circle 或者 ellipse，默认是 ellipse

  • size：可选，渐变的大小，可以是 closest-side、closest-corner、farthest-side、farthest-corner，默认是 farthest-corner

  • at position：可选，渐变的位置，可以是 center、top、bottom、left、right，也可以是像素值或者百分比值，比如 10px 20px、10% 20% 等等

  • start-color：必需，渐变的起始颜色

  • last-color：可选，渐变的结束颜色

e.g.

1
2
3
4
5
div{
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, red, yellow);
}

在 Grabient 网站可以在线生成渐变色。

价格选项卡

点击查看代码
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
        }
        .tab{
            width: 100%;
            height: 50px;
            background-color: #000;
            color: #fff;
            font-size: 20px;
            line-height: 50px;
            text-align: center;
        }
        .tab li{
            display: inline-block;
            width: 100px;
            height: 50px;
            cursor: pointer;
        }
        .tab li.active{
            background-color: #fff;
            color: #000;
        }
        .content{
            width: 100%;
            height: 300px;
            background-color: #ccc;
            display: none;
        }
        .content.active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="tab">
            <li class="active">Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
            <li>Tab4</li>
            <li>Tab5</li>
        </ul>
        <div class="content active">Content1</div>
        <div class="content">Content2</div>
        <div class="content">Content3</div>
        <div class="content">Content4</div>
        <div class="content">Content5</div>
    </div>
    <!---<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>--->
    <script>
        // $(function(){
        //     $('.tab li').click(function(){
        //         $(this).addClass('active').siblings().removeClass('active');
        //         var index = $(this).index();
        //         $('.content').eq(index).addClass('active').siblings().removeClass('active');
        //     });
        // });
        window.onload = function(){
            var tabs = document.querySelectorAll('.tab li');
            var contents = document.querySelectorAll('.content');

            tabs.forEach(function(tab, index){
                tab.addEventListener('click', function(){
                    tabs.forEach(function(tab){
                        tab.classList.remove('active');
                    });
                    this.classList.add('active');

                    contents.forEach(function(content){
                        content.classList.remove('active');
                    });
                    contents[index].classList.add('active');
                });
            });
        };
    </script>
</body>
</html>

transform2D

位移

translate() 函数用于设置元素的位移。

语法：

1
translate(x, y);

旋转

rotate() 函数用于设置元素的旋转。

语法：

1
rotate(angle);

缩放

scale() 函数用于设置元素的缩放。

语法：

1
scale(x, y);

倾斜

skew() 函数用于设置元素的倾斜。

语法：

1
skew(x-angle, y-angle);

矩阵

matrix() 函数用于设置元素的变形。

语法：

1
matrix(a, b, c, d, e, f);

  • a：必需，水平缩放

  • b：必需，水平倾斜

  • c：必需，垂直倾斜

  • d：必需，垂直缩放

  • e：必需，水平位移

  • f：必需，垂直位移

e.g. 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Transform2D</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;
        }
        .translate{
            transform: translate(100px, 100px);
        }
        .rotate{
            transform: rotate(45deg);
        }
        .scale{
            transform: scale(2, 2);
        }
        .skew{
            transform: skew(30deg, 30deg);
        }
        .matrix{
            transform: matrix(1, 0.5, 0.5, 1, 100, 100);
        }
    </style>
</head>
<body>
    <div class="translate"></div>
    <div class="rotate"></div>
    <div class="scale"></div>
    <div class="skew"></div>
    <div class="matrix"></div>
</body>
</html>

e.g. 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
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Transform2D</title>
    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: brown solid 1px;
            border-radius: 3px;
            text-align: center;
            margin: 100px auto;
            /*在这里添加一个过渡效果*/
            transition: all 1s;

            &:hover {
                box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
                /* 放大 1.5 倍 */
                transform: scale(1.5);
            }
        }

        #box2 {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            text-align: center;
            /*在这里添加一个过渡效果*/
            transition: all 1s;

            &:hover {
                /*内容旋转 1 周*/
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">Soyo sann ❤️ Love!
    </div>
</div>
</body>
</html>

rotate 和 scale 会覆盖 translate。并且，它们不能在同一个 transform 中，需要分开写。所以上面这个例子中，在第一个 <div id="box1"> 中，使用了 scale;
在第二个 <div id="box2"> 中，使用了 rotate。这样就能实现鼠标悬停时，放大 1.5 倍，且旋转 1 周的效果了。