太极图说(CSS版)

序说

“阴阳太极学说”为中华古人对自然万物观察思考归纳而出的思想精华,被众多学派和大师引入运用并加以不同注解和升华。本文也是基于自己的学习和见解,旨在运用太极学说的拙见和盘古的传说解释运用前端技术的实现过程。如有妄言之处，请多包涵，欢迎指正。

无极

昔二仪未分，瞑涬鸿蒙，未有成形，天地混沌如鸡子，盘古生其中。是为无极状态。

<div class="wuji">
</div>

<style>
.wuji{
      background-color: black;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: relative;
      border:1px solid black;
      overflow: hidden;
}
</style>

两仪生

万八千岁，盘古斧劈混沌而分阴阳，两仪始生焉。

<style>
.wuji::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    background-color: white;
}
</style>

天地分

清者上升为天，浊者下沉为地。 天为阳，地为阴。阳聚为太阳，阴聚而为太阴。

<div class="wuji">
  <div class="taiyang">
  </div>
  <div class="taiyin">
  </div>
</div>

<style>
    .taiyang,.taiyin{
          width: 50%;
          height: 50%;
          position: absolute;
          border-radius: 50%;
          left: 25%;
          display: flex;
          align-items: center;
          justify-content: center;
    }
    .taiyang{
         top: 0;
         background-color: white;
    }
    .taiyin{
         bottom: 0;  
         background-color: black;
    }
</style>

阴阳互生

孤阴不生，孤阳不长。阳极而生阴，阴极而生阳。阴中有阳，阳中有阴。一阴一阳，互为其根。

  <div class="wuji">
    <div class="taiyang">
      <div class="yin">
      </div>
    </div>
    <div class="taiyin">
      <div class="yang">
      </div>
    </div>
  </div>
  
  <style>
  .yin,.yang{
        width: 20%;
        height: 20%;
        border-radius: 50%;
   }
   .yin{
        background-color: black;
    }
   .yang{
        background-color: white;
    }
  </style>

变化无穷

无极而太极。太极动而生阳，动极而静，静而生阴，静极复动。此消彼长，变化无穷。

<style>
    .wuji{
        animation:  taiji 3s linear infinite;
    }
    @keyframes taiji{
      to{
        transform: rotate(1turn);
      }
    }
</style>