HTML5太極圖是一種很有趣的圖形元素，它可以通過一些核心代碼實現。以下是實現太極圖的HTML5代碼。
<html>
<head>
<style>
#taiji {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
transform-origin: center center;
}
#taiji .yin {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
border-radius: 100px 100px 0 0;
background: #000;
transform-origin: bottom center;
transform: rotate(180deg);
}
#taiji .yang {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 50%;
border-radius: 0 0 100px 100px;
background: #fff;
transform-origin: top center;
}
#taiji .yuan {
width: 20px;
height:20px;
background: #000;
border-radius: 50%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
#taiji:hover{
animation: rotate 5s linear infinite
}
@keyframes rotate {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div id="taiji">
<div class="yin"></div>
<div class="yang"></div>
<div class="yuan"></div>
</div>
</body>
</html>在HTML中，我們先定義一個ID為“taiji”的DIV元素，然后在其中定義了一個黑白兩部分的太極圖，以及一個小圓點，通過CSS設置顏色、邊框大小等樣式。隨著鼠標在太極圖上方懸停，動畫效果會啟動，太極圖會呈現一個旋轉的效果。