css實例——「旋轉」太極八卦圖

時間 2020-09-09

標籤 css 實例旋轉太極八卦欄目 CSS 简体版

原文原文鏈接

話很少說，直接上代碼：

HTML代碼部分：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>太極八卦圖案例</title>
 6         <link rel="stylesheet" type="text/css" href="buguaStyle.css" />
 7     </head>
 8     <body>
 9         <div class="background">    <!--主要是用到了定位，還有動畫 -->
10             <div class="box">
11                 <div class="Black"></div>
12                 <div class="White"></div>
13                 <div class="medium_black"></div>
14                 <div class="medium_white"></div>
15                 <div class="little_black"></div>
16                 <div class="little_white"></div>
17             </div>
18         </div>
19     </body>
20 </html>

這裏是css代碼部分：

 1 *{    /*css代碼上來必須寫的*/
 2     padding: 0;
 3     margin: 0;
 4     list-style: none;
 5 }
 6 .background{
 7     width: 100%;
 8     height: 100%;
 9     background: darkgray;
10     position: fixed;
11     /*定位  ->    absolute(生成絕對定位元素，相對於父級元素進行定位)
12                 fixed（生成絕對定位元素，相對於瀏覽器窗口進行定位）
13                 relative（生成相對定位元素，相對於其正常位置進行定位）*/
14 }
15 .box{
16     width: 400px;
17     height: 400px;
18     border-radius:50%;
19     position: absolute;    /*由於父級元素有了定位，因此這裏用absolute*/
20     top: 0;                /*上、下、左、右四個屬性值來實現元素位置的改變*/
21     bottom: 0;
22     left: 0;
23     right: 0;
24     margin: auto;
25     animation:run 5s infinite linear;
26 }
27 .Black{
28     width: 200px;
29     height: 400px;
30     background: black;
31     border-radius: 200px 0 0 200px;        /*造成一個黑色的左半圓*/
32     position: absolute;
33 } 
34 .White{
35     width: 200px;
36     height: 400px;
37     background: white;
38     border-radius:0 200px 200px 0;        /*造成一個白色的左半圓*/
39     left: 200px;
40     position: absolute;
41 }
42 .medium_black{
43     width: 200px;
44     height: 200px;
45     background: black;
46     border-radius: 50%;
47     position: absolute;
48     left: 0;
49     right: 0;
50     margin: auto;
51     bottom: 0;    /*四個屬性實現了中等大小的圓在最xia邊的中間的位置*/
52 }
53 .medium_white{
54     width: 200px;
55     height: 200px;
56     background: white;
57     border-radius: 50%;
58     position: absolute;
59     left: 0;
60     right: 0;
61     margin: auto;
62     top: 0;    /*這個能夠寫也能夠不寫，由於是這個默認是在左上角的，寫了上邊三個屬性後就己經能達到想要的效果了*/
63 }
64 .little_black{
65     width: 100px;
66     height: 100px;
67     background: black;
68     border-radius: 50%;
69     position: absolute;
70     left: 0;
71     right: 0;
72     margin: auto;
73     top: 50px;
74 }
75 .little_white{
76     width: 100px;
77     height: 100px;
78     background: white;
79     border-radius: 50%;
80     position: absolute;
81     left: 0;
82     right: 0;
83     margin: auto;
84     bottom: 50px;
85 }
86 @keyframes run{
87     from{
88         transform: rotate(0deg);/*這裏不寫也是能夠的，由於默認的話就是0*/
89     }
90     to{
91         transform: rotate(360deg);
92     }
93 }

總結：

主要是用到了定位（position），要熟悉定位的三個經常使用屬性。css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。