凯发k8官方网
收集整理的这篇文章主要介绍了
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 id="canvas" width="500" height="500">canvas>div>
let ctx = document.getelementbyid("canvas").getcontext("2d");ctx.beginpath();ctx.fillstyle = "red";ctx.arc(250, 250, 200, math.pi / 2, math.pi * 1.5, false);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();
总结
以上是凯发k8官方网为你收集整理的html css实现旋转太极图动态效果的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。
