HTML是一種標記語言，可以用來創建網頁。而八卦圖是一種中華文化圖形，象征著陰陽兩極及其在自然界中的變化。下面我們來學習如何用HTML畫出八卦圖的動態代碼。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
width: 200px;
position: relative;
}
.yin {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.yang {
height: 100px;
width: 100px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.animation {
animation: spin 3s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="yin"></div>
<div class="yang animation"></div>
</div>
</body>
</html>代碼解釋：
首先，我們創建一個寬高為200px的容器，然后給予容器相對定位。接下來，我們創建一個寬高為100px，位于容器頂部的黑色半圓“陰”和一個寬高為100px，位于容器底部的白色半圓“陽”。
“陰”和“陽”的位置都是用絕對定位實現的。使用了CSS3中的transform屬性來讓它們都水平居中對齊。另外，“陽”還使用了animation屬性來添加了一個旋轉效果。最后，我們在HTML中顯示出這些元素。
經過一系列的CSS和HTML代碼處理，最終我們就成功的用HTML畫出了一個酷炫的八卦圖，其中旋轉的“陽”代表著世間的萬物在不斷變化，而“陰”代表著固定的事物。這也代表了中華文化中“天人合一”的精神。