【HTML非全解0】HTML & CSS 入门项目八卦2-给太极图使用CSS3加动画

让八卦转

动画属性

1
2
3
4
5
6
7
8


#八卦 {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    animation: x 3s linear infinite ;
    }

animation x 1s;，声明动画名称x（标识符identifier）

遇坑，勿写中文：，看清:没用

输入法隔离，IDE专用英语输入法，开一个便签，需要中文，粘贴进来

写关键帧

1
2
3
4
5
6
7
8


@keyframes x{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(306deg);
    }
}

关键位置from和to

顺序不重要：animation: x 3s linear infinite ;

调阴影

搜索：box-shadow generator预览阴影样式，再誊写回来

遇事不知搜*** generator，好处是能帮你生成代码

工具：cssmatic: - Blur Radius 不超过5px - 调代码，然后copy

1
2
3
4
5
6
7
8
9


#八卦 {
    position: relative;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    animation: x 3s linear infinite ;
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75);
    }

面试必问题 CSS居中（水平+垂直）

先给个容器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<body>
    <div id="八卦-wrapper">
        <div id="八卦">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        道可道，非常道
    </div>
</body>

！命名规则：包裹作用的一般叫：**-wrapper

CSS Border法调试

1
2
3


#八卦-wrapper{
    border:1px solid red;
}

! 先确定位置，在写CSS样式:

1
2
3


#八卦-wrapper{
    border:1px solid red;
}

为什么没有红线没和页面左面重合？

因为body有默认内边距样式，要干掉：

1
2
3
4
5


* {
    box-sizing: border-box;
    padding:0;
    margin:0;
}

vh

红框高度为什么不和页面一样高？height:100%没用？

在body下写height:100%没有用，为什么？google
要写成height:100vh

1
2
3
4


#八卦-wrapper{
    border:1px solid red;
    height:100vh;
}

vh: viewport height 用户可视范围窗口左上到右下

100（即100%）用来表示和可视范围一样高（宽度不用100%，自适应即可）
不能写成100%vh，这样只认100%，vh失效

flex部个局

内容居中：

1
2
3
4
5
6
7
8


#八卦-wrapper{
    border:1px solid red;
    height:100vh;
    /* flex三行式 */
    display: flex;
    justify-content: center;
    align-items: center;
}

字怎么在右边

字会往上围绕

用div包起来，和#八卦div形成上下结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<div id="八卦-wrapper">
    <div id="八卦">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
        道可道，非常道
    </div>
</div>

但此时还受display:flex影响，默认把里面的元素横向一字排开：

1
2
3
4
5
6
7
8
9


#八卦-wrapper{
    border:1px solid red;
    height:100vh;    
    /* flex三行式 居中*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

不对，遇错，试试另外的属性选项，二选一/三选一，马上换

1
2
3
4
5
6
7
8
9


#八卦-wrapper{
    border:1px solid red;
    height:100vh;    
    /* flex三行式 居中*/
    display: flex;
    justify-content: center;
    align-items: center
    flex-direction: column;
}

加个div，隔开一点：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<div id="八卦-wrapper">
    <div id="八卦">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id="八卦-描述">
        道可道，非常道
    </div>
</div>

空出一个字(一个字宽度默认是16px，但不精确)：

1
2
3
4


#八卦-描述{
    margin-top:1em;
}

代码测试链接：JSBin

JSBin 里还是有bug，窗口调小，变椭圆，先不管

此阶段完整代码：

  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


<!DOCTYPE html>
<html lang="zh">

<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>TaiJiTu</title>
    <style>
        body {
            background: #eee;
        }
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        @keyframes x {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(306deg);
            }
        }

        #八卦 {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
            animation: x 3s linear infinite;
            box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);
        }

        #八卦>div:first-child {
            position: absolute;
            width: 50%;
            height: 100%;
            left: 0;
            background: black;
        }

        #八卦>div:nth-child(2) {
            position: absolute;
            width: 50%;
            height: 100%;
            right: 0;
            background: white;
        }
        #八卦>div:nth-child(3) {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            border-radius: 50%;
            background: black;
        }
        #八卦>div:nth-child(4) {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            bottom: 0;
            margin-left: -100px;
            border-radius: 50%;
            background: white;
        }
        #八卦>div:nth-child(5) {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 75%;
            margin-left: -25px;
            border-radius: 50%;
            background: black;
        }
        #八卦>div:nth-child(6) {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            bottom: 75%;
            margin-left: -25px;
            border-radius: 50%;
            background: white;
        }
        #八卦-wrapper {
            border: 1px solid red;
            height: 100vh;
            /*  vh:viewport height  用户可视范围 窗口左上到右下 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* flex三行式 */
            flex-direction: column;
        }
        #八卦-描述 {
            margin-top: 1em;
        }
    </style>
</head>

<body>
    <div id="八卦-wrapper">
        <div id="八卦">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>

        <div id="八卦-描述">
            道可道，非常道
        </div>
    </div>
</body>

</html>

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名
河掘思知简

【HTML非全解0】HTML & CSS 入门项目八卦2-给太极图使用CSS3加动画

文章目录

让八卦转

动画属性

写关键帧

调阴影

面试必问题 CSS居中（水平+垂直）

先给个容器

CSS Border法调试

vh

flex部个局

参考文章

相关文章