如果對代碼有疑惑，可以看我的個人視頻
https://www.bilibili.com/video/BV1vV411r75p/
效果

靜止太極圖

動態太極圖
動態太極圖代碼

body {background: silver;height: 2000px;}#canvas {position: absolute;top: 20%;left: 50%;margin-left: -250px;animation: rotate1 .1s linear infinite; }@keyframes rotate1 {100% {transform: rotate(360deg);}} <div><!-- canvas畫布 --><!-- IE9 --><canvas id="canvas" width="500" height="500"></canvas></div> let ctx = document.getElementById("canvas").getContext("2d");// 創建context對象// 左大半圓ctx.beginPath();// 起始路徑ctx.fillStyle = "red";// 填充顏色ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, false);// 創建弧/曲線//arc(x,y,r,起始角，結束角，順時針) ctx.closePath();// 從當前點返回起始路徑ctx.fill();// 填充繪圖// 右大半圓ctx.beginPath();ctx.fillStyle = "#000";ctx.arc(250, 250, 200, Math.PI / 2, Math.PI * 1.5, true);ctx.closePath();ctx.fill();// 右小半圓ctx.beginPath();ctx.fillStyle = "red";ctx.arc(250, 150, 100, Math.PI / 2, Math.PI * 1.5, true);ctx.closePath();ctx.fill();// 左小半圓ctx.beginPath();ctx.fillStyle = "#000";ctx.arc(250, 350, 100, Math.PI / 2, Math.PI * 1.5, false);ctx.closePath();ctx.fill();// 上小圓ctx.beginPath();ctx.fillStyle = "#000";ctx.arc(250, 150, 25, 0, Math.PI * 2);ctx.closePath();ctx.fill();// 下小圓ctx.beginPath();ctx.fillStyle = "red";ctx.arc(250, 350, 25, 0, Math.PI * 2);ctx.closePath();ctx.fill();

總結

以上是生活随笔為你收集整理的HTML+CSS实现旋转太极图动态效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。