HTML+CSS实现旋转太极图动态效果

如果对代码有疑惑，可以看我的个人视频
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实现旋转太极图动态效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。