html如何让div旋转,3种方法（div法、css法、js法）制作html的旋转太极图

1.说明：

推荐指数：★★★★

通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。

2.复习html的结构框架

html结构基本框架代码

3 div法

3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。

div法的旋转的太极图

3.2 效果图

4 css法

4.1 css法.html代码

css法的旋转的太极图

4.2 tj.css代码：注意与上面两个文件放在同一个文件夹下.tj{ width: 100px; height: 200px; border: solid black; border-width: 2px 100px 2px 2px; background-color: #fff; border-radius: 50%; position: absolute; /*run是动起来的函数，在最后面设置和定义*/ animation: run 2s linear infinite; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}.tj:before{ content: ' '; position: absolute; width: 28px; height: 28px; background-color: black; /*36=(100-28)/2得到的，是小白色圆圈的半径*/ border: 36px #ffffff solid; border-radius: 50%; top: 0; left: 50%;}.tj:after{ content: ' '; position: absolute; width: 28px; height: 28px; background-color: #ffffff; /*36=(100-28)/2得到的，是小黑色圆圈的半径*/ border: 36px black solid; border-radius: 50%; top: 50%; left: 50%;}/*run动起来的函数定义*/@keyframes run{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

4.3 效果图

5 js法=就是JavaScript法

5.1 js法.html代码：

js法的旋转的太极图

5.2 script.js代码：与上面html放在同一个文件夹下//注意到没有null=0，效果是一样的var angle = 0;//var canvas = null;//var ctx = null;var canvas = 0;var ctx = 0;function main(){ window.setInterval(function() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); // 画布大小有关 ctx.clearRect(0, 0, 300, 300); // 线条宽度0~10，均可 ctx.lineWidth = 0; ctx.save(); // 旋转的中心点的坐标位置150,150 ctx.translate(150,150); ctx.rotate(angle); // 太极黑色部分 ctx.fillStyle = 'black'; ctx.beginPath(); // 注意几个函数数值的关系，120,60，半径和坐标的关系，如果要缩小半径，那么坐标也需要调整 ctx.arc(0, 0, 120, 0, Math.PI, true); ctx.fill(); ctx.closePath(); // 太极白色部分 ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(0, 0, 120, 0, Math.PI, false); ctx.fill(); ctx.closePath(); // 太极黑色部分 ctx.fillStyle = 'black'; ctx.beginPath(); ctx.arc(60, -0.6, 60, 0, Math.PI, false); ctx.fill(); ctx.closePath(); // 太极白色部分 ctx.fillStyle = 'white'; ctx.lineWidth = 0; ctx.beginPath(); ctx.arc(-60, 0, 60, 0, Math.PI, true); ctx.fill(); ctx.closePath(); // 白色太极部分里面的小黑色圆圈 ctx.fillStyle = 'black'; ctx.beginPath(); //画圆的函数：-145,0是坐标，15是半径，2*Math.PI是一个圆，一个π是半圆 ctx.arc(-60, 0, 15, 0, 2*Math.PI, false); ctx.fill(); ctx.closePath(); // 黑色太极部分里面的小白色圆圈 ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(60, 0, 15, 0, 2*Math.PI, false); ctx.fill(); ctx.closePath(); // 旋转角度一次增加多少 ctx.restore(); angle += 0.02; // 50代表转速，越大越慢，越小越快 },1);}

5.3 效果图

6 值得收藏，慢慢回味。