CSS太极八卦动画特效（人生第一篇博客）

HTML+CSS简单动画效果

　　首先搭建好网页框架，框架是每个网页都不可少的，有了框架，一个网页才能搭建好，就像做房子一样，先要把房子的外形造好再慢慢地装修。什么是框架呢？我个人是这么理解的，每个网页的框架都是由N多个div组成的，div就像一个一个的箱子，可以往里面装很多很多东西。div里还能再装一个div，我们称之为嵌套，往一个标签里面再写一个标签这就是嵌套。嵌套也是有很多规则与写法的。然后网页都是用html写出框架再用css修饰的，那么今天小编也是刚学了一个css的动画显示效果。这里我就不多说了，因为毕竟我自己也是一个小白，哈哈哈！

HTML框架结构

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>太极八卦</title>
 8     <link rel="stylesheet" href="css/tj.css" type="text/css">  /*这里是外部导入的css链接*/
 9 </head>
10 <body>
11 　　<!-- 最大的盒子命名为box -->
12     <div class="box">
13 　　　　　<!-- 白色盒子命名为white -->
14         <div class="white">
15 　　　　　　　<!--中间的白色盒子命名为white_mid-->
16             <div class="white_mid">
17 　　　　　　　　　　<!-- 最小的黑色盒子命名为black_in -->
18                 <div class="black_in"></div>
19             </div>
20             
21         </div>
22         <div class="black">
23             <div class="black_mid">
24                 <div class="white_in"></div>
25             </div>
26         </div>
27     </div>
28 　　<!-- 底部栏盒子 -->
29     <div class="foot">
30         <p>©小枫<br>QQ:204922526</p>
31     </div>
32 </body>
33 </html>

　　其实搭建HTML框架就是这么简单，大盒子里面装装小盒子。

CSS样式

 1 /*设置body的背景颜色和初始化内外边距*/
 2 body{
 3     background: #cfcfcf;
 4     margin: 0px;
 5     padding: 0px;
 6 }
 7 .box{
 8     width: 300px;
 9     height: 300px;
10     margin: 150px auto;
11     border-radius: 50%;
12     overflow: hidden;
13     position: relative;
14     
15     /* 激活动画 这里要先设置旋转动画的帧数*/
16      animation: auto 1s linear infinite;
17 }
18 .white{
19     width: 150px;
20     height: 300px;
21     background: white;
22     float: left;
23 }        
24 .black{
25     width: 150px;
26     height: 300px;
27     background: black;
28     float: left;
29 }
30 .white_mid{
31     width: 150px;
32     height: 150px;
33     background: white;
34     position: absolute;  /*给盒子定位 和浮动差不多，唯一不同的地方就是它加了这个元素之后它的父级也要加这个元素*/
35     top: 0px; /*上面距离*/
36     left: 75px;/*左边距离*/
37     border-radius: 50%; /*圆角*/
38 }
39 .black_mid{
40     width: 150px;
41     height: 150px;
42     background: black;
43     position: absolute;
44     bottom: 0px;
45     left: 75px;
46     border-radius: 50%;
47 }
48 .black_in{
49     width: 40px;
50     height: 40px;
51     background: black;
52     position: absolute;
53     border-radius: 50%;
54     margin-left: 50%;
55     left: -20px;
56     margin-top: 50%;
57     top: -20px;
58 }
59 .white_in{
60     width: 40px;
61     height: 40px;
62     background: white;
63     position: absolute;
64     border-radius: 50%;
65     margin-left: 50%;
66     left: -20px;
67     margin-top: 50%;
68     top: -20px;
69 }
70 
71 /* 设置旋转动画帧 */
72 @keyframes auto {
73     50%{
74         transform: rotate(180deg);
75     }
76     100%{
77         transform: rotate(360deg);
78     }
79 }
80 .foot{
81     width: 100%;
82     height:40px;
83     text-align: center; /*文本居中*/
84     color: red;
85     font-size: 14px;  /*字体大小*/
86 
87 }

　　注意：box盒子里布局要用到float浮动来让两个div水平排列，因为div默认排列方式都是垂直向下排列的，

　　　　最大盒子用border-radius 圆角后要用overflow:hidden清除溢出部分才能变成一个圆形。

　　其他的自己慢慢琢磨吧，我都已经打好注释了。第一次发博客感觉打字好累，哈哈哈

　最后放上一张样式图，慢慢理解代码的意思，相信你能行的。

这是div盒子的解析图

　　今天就说到这里了，第一次写博客居然用了一个小时，哈哈，我太难了...好了，再见啦，和我一样还在奋斗的小白们。