HTML + CSS 实现动态太极图

太极图

起源
太极图被称为“中华第一图”。从孔庙大成殿梁柱，到老子楼观台、三茅宫、白云观的标记物；从道士的道袍，到算命先生的卦摊；从中医、气功、武术及中国传统文化的书刊封面、会徽会标，到南韩国旗图案、新加坡空军机徽、玻尔勋章族徽……等等，太极图无不跃居其上。这种广为人知的太极图，其形状如阴阳两鱼互纠在一起，因而被习称为“阴阳鱼太极图”。

简介
《太极图》据传是宋朝道士陈抟所传出。陈抟是五代至宋初的一位道士，对道家思想和易学都有很深造诣。据史书记载，陈抟曾将《后天太极图》、《八卦图》、《河图》以及《洛书》传给其学生种放，种放以之分别传穆修、李溉等人，后来穆修将《太极图》传给周敦颐。周敦颐著《太极图说》加以解释。现在我们看到的太极图，就是周敦颐所传的。周敦颐“一方面从陈抟派道家易里吸收了太极图式说并与新的解释，另一方面继承了汉唐以来义理学派的传统······成为宋明道学家解易的先驱。”

预备知识

HTML（超文本标记语言）
知识点还没掌握的小伙伴可以简单学习一下：HTML基础知识 - 笔记

CSS（层叠样式表）
知识点还没掌握的小伙伴可以简单学习一下：CSS基础知识 - 笔记

成果展示

废话咱不多说，大家都准备好了么？直接看图，代码走起来......

代码如下：

HTML代码

<!DOCTYPE html>
<html>
  <head> 
      <meta charset="utf-8">
      <title></title>
      <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>
  <body>
      <div class="text">
          学习不要太急，要太极！
      </div>
      <div class="center">
          <div class="shape"></div>
      </div>
  </body>
</html>

CSS代码：

body{
  margin: 0;
  padding: 0;
}
.text{
  position: absolute;
  top: 20%;
  left:30%;
  color: #000;
  font-size: 30px;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) perspective(800px) rotateX(45deg);
  background: #000;
  border-radius: 50%;
  border: 10px solid #232323;
  box-shadow: 0 10px 0 #383838 0 10px 15px rgba(0,0,0,.5);
}
.shape{
  width: 200px;
  height: 100px;
  border-bottom: 100px solid #fff;
  border-radius: 50%;
  animation: animate 5s linear infinite;
}
.shape:before{
  content: '';
  position: absolute;
  top: 50%;
  right: 0%;
  width: 20px;
  height: 20px;
  background: #000;
  border: 40px solid #fff;
  border-radius: 50%;
}
.shape:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 40px solid #000;
  border-radius: 50%;
}
@keyframes animate{
  0%{
      transform: rotate(360deg);
  }
  100%{
      transform: rotate(0deg);
  }
}

最后编辑于：2020.02.21 12:53:13