让八卦转

动画属性

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);
    }
}
  • 关键位置fromto
  • 顺序不重要: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
#八卦-描述{
    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>

·未完待续·

参考文章

相关文章