3种办法(div法,css法,js法)制作html的旋转太极图

其他 2020-04-10 16:03:17 阅读次数: 0

感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。感谢分享原文-http://bjbsair.com/2020-04-03/tech-info/29824.html

1.说明：

推荐指数：★★★★

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

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

2.复习html的结构框架

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>html结构基本框架代码</title>  
    </head>  
      
    <body>  
    </body>  
  
</html>

3 div法

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

<!DOCTYPE html>  
<html>  
  
<head>  
    <meta charset="UTF-8">  
    <title>div法的旋转的太极图</title>  
</head>  
<!--单独style，不在head和body，只是在body内有一个div容器-->  
<style>  
div{  
    width: 0;  
    /*这个高就是黑色圆形和白色圆形的直径和*/  
    height: 200px;  
    /*黑色太极部分的圈带动的黑色的阴影*/  
    border-left: 100px solid black;  
    /*白色太极部分的圈带动的白色的阴影*/  
    border-right: 100px solid #fff;  
    box-shadow: 0 0 15px rgba(0,0,0,.5);  
    /*旋转半径100*/  
    border-radius: 100px;  
    /*旋转速度定义,越小越快*/  
    -webkit-animation:rotation 2.5s linear infinite;  
}  
div:before{  
    content: "";  
    position: absolute;  
    height: 100px;  
  
    z-index: 1;  
    border-radius: 100px;  
    /*白色的小半圆*/  
    border-left: 50px solid #fff;  
    border-right: 50px solid #fff;  
    left: -50px;  
    /*黑色的小半圆，因为转动拖动黑色阴影*/  
    box-shadow: 0 100px 0 black;  
}  
div:after{  
    content: "";  
    position: absolute;  
    /*height是太极里面小圆圈的高30，要和border-radius30一致，才画出圆*/  
    height: 30px;  
    /*这个是显示小圆圈的,0就是不显示*/  
    z-index: 1;  
    border-radius: 30px;  
    border-left: 15px solid;  
    border-right: 15px solid;  
    /*top和left，决定小圆圈白色和黑色的位置*/  
    top: 40px;  
    left: -15px;  
    /*黑色太极部分里面的小白色圆圈*/  
    box-shadow: 0 100px 0 white;  
}  
/*旋转角度函数定义*/  
@-webkit-keyframes rotation {  
    0% {-webkit-transform:rotate(0deg);}  
    100% {-webkit-transform:rotate(-360deg);}  
}  
</style>  
  
<body>  
    <div></div>  
</body>  
  
</html>

3.2 效果图

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

4 css法

4.1 css法.html代码

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>css法的旋转的太极图</title>  
    <!--css导入和js导入不一样，请注意-->  
    <!--script-- src="./tj.css"></!--script-->  
    <link rel="stylesheet" type="text/css" href="./tj.css">  
</head>  
<body>  
    <div class="tj"></div>  
      
</body>  
</html>

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 效果图

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

5 js法=就是JavaScript法

5.1 js法.html代码：

<!DOCTYPE html>  
<html>  
  
    <head>  
        <meta charset="UTF-8">  
        <title>js法的旋转的太极图</title>  
        <!--注意下面2钟都可以，主要是浏览器都支持html5-->  
        <!--script-- src="script.js" type="text/javascript"></!--script-->  
        <script src="./script.js"></script>  
        <!--简单的css内容就这样写在下面，如果css比较复杂，则需要外部导入-->  
        <style type="text/css">  
            canvas{  
                display: block;  
                margin: 20px auto;  
                  
            }  
        </style>  
    </head>  
  
    <body onload="main()">  
        <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色-->  
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>  
    </body>  
  
</html>

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 效果图

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

6 值得收藏，慢慢回味。

HDX柿子
发布了0 篇原创文章 · 获赞 0 · 访问量 2424
私信 关注

猜你喜欢

转载自blog.csdn.net/zxjoke/article/details/105377518
今日推荐
周排行
Access的四舍五入取整
8.23 前端学习过程
入门学习过程方向与漏洞复现总结：
操作分布式文件之八：如何批量并行读写远程文件和事务补偿处理
应邀出个教程 （搭建tensorflow跑网络环境）
Kubernetes之Pod控制器应用进阶
14-[mysql内置功能]--
HDU6212 区间dp 好题
VS2015生成代码图
验证手机号的工具类
每日归档
更多
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)
2024-10-12(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022