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实现旋转太极图动态效果相关推荐

用Css+Div实现太极图自动旋转
用Css+Div实现太极图自动旋转补充: 源代码展示: <!DOCTYPE html> <html lang="en"><head><m ...
html怎么把字做成动画效果,用纯CSS实现文字的动态效果
你可能经常会看到类似酷炫的网站: APPLE官网图片作者的工程项目在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. ...
HTML实现旋转太极图
HTML实现旋转太极图效果图前端实例代码 <!DOCTYPE html> <html><head><meta charset="utf-8&qu ...
HTML+CSS制作旋转的loading效果
HTML+CSS制作旋转的loading效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
css实现旋转的小流星动画
效果如下: 完整代码如下 : <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？
js设置css色相旋转 Hue rotation is often an easy way to change the appearance of a plot or figure without t ...
css 图片旋转样式
文章目录前言一.css 图片旋转样式总结前言提示:这里可以添加本文要记录的大概内容: 一.css 图片旋转样式示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务 ...
css 图片旋转并自适应div
import { useState} from 'react' function zimg(params) {const [rotateIndex,setrotateIndex]=useState(0 ...

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

HTML+CSS实现旋转太极图动态效果相关推荐

最新文章

热门文章