css-study/index.html at master · 314new/css-study · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式参考</title>
    <link href="./index.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <section>
        <header>
            1.active 激活状态(鼠标被点击下去的样式反应)
        </header>
        <article>
            其与LVHA构成链接的样式设置顺序
            L：link为访问的链接
            V：visited已经访问的链接
            H：hover用户鼠标悬停的链接
            A: active用户点击时的激活状态
        </article>
        <footer>这里不再进行示例演示</footer>
    </section>

    <section>
        <header>
            2.align-content 弹性布局内容的垂直方向上的排列方式，这时的内容需要是可以换行的
        </header>
        <article>
            <div class="flex-container">
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
                <div>(❤ ω ❤)你</div>
            </div>
        </article>
        <footer></footer>
    </section>

    <section>
        <header>
            3.angle
        </header>
        <article>
            <div>
                <div>度deg </div>
                <div>白分度grad</div>
                <div>弧度rag</div>
                <div>圈数turn</div>
            </div>
        </article>
        <footer></footer>
    </section>

    <section>
        <header>
            4.animation
        </header>
        <article>
            <div>
                <div>animation-name 动画的名称</div>
                <div>animation-duration 动画的周期</div>
                <div>animation-timing-function 定义动画的执行节奏</div>
                <div>animation-delay 动画的延时时间(如果为-将会从其绝对值的时间开始执行动画)</div>
                <div>animation-iteration-count 动画执行的次数,可以设置播放的次数为小数.5代表动画从0-50%</div>
                <div>animation-direction 动画的方向</div>
                <div>animation-fill-mode 动画执行前后如何给动画应用样式</div>
                <div>animation-play-state 动画当前的运行状态 running paused(可以使用但是需要兼容处理)</div>
                <section>
                    <div class="group"></div>
                </section>
            </div>
        </article>
        <footer></footer>
    </section>
    <script src="./index.js"></script>
</body>
</html>