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

最新推荐文章于 2023-11-22 00:01:17 发布
最新推荐文章于 2023-11-22 00:01:17 发布
阅读量275 收藏 1
点赞数
原文链接：http://bjbsair.com/2020-04-03/tech-info/29824.html
版权

感谢分享原文-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柿子
关注
js+css3图片3D旋转轮播特效
06-09
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
只用一个div制作太极图
weixin_44296858的博客
07-01 764
今天来说说如何用一个div制作太极图，之前做太极图用了很多标签，然后每个标签定位啊，设置圆角啊，代码量肯定不会少，但是今天，我们用一个div就来制作： 　　先看html代码截图，真的只有一个标签哦。 　　再看效果： 　　这其中关键就是给这个div设置一边的边框（我设置的是底边框），这一边的边框大小是div容器高度的一半，然后给div设置圆角属性后成了这样（写了初始样式代码）： 　　　　　　　　 　　然后利用伪元素after和before给div让它上面有两个圆的效果就可以了，非常简单！ 　　下面附上css
css3 画太极图——用一个div实现
且听风吟的博客
10-21 830
css3 画太极图——用一个div实现
悬浮显示播放按钮及边框
2301_80188692的博客
11-22 40
.box1 {.mask {top:0px;left:0px;opacity:0;.mask img{top: 45%;left:45%;opacity: 1;</div></div></div>
css3 画太极图——用三个div实现
且听风吟的博客
10-16 598
css3 画太极图——用三个div实现
CSS画太极图
fly
03-22 496
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>太极图</title> <style type="text/css" media="screen"> #a{ width: 300px; height:...
html+css3D轮播图片
01-29
HTML和CSS是网页设计的基础，其中...通过以上69行代码实现的3D轮播图，不仅展示了HTML和CSS3的强大功能，还提供了良好的用户体验。在实际项目中，可以根据需求调整样式和交互细节，以适应不同的设计风格和功能需求。
纯HTML5+CSS3制作图片旋转
09-24
在现代网页设计中，HTML5和CSS3的组合为我们提供了丰富的功能和强大的视觉效果，其中就包括图片旋转这一常见的动态效果。本篇文章将详细介绍如何利用纯HTML5和CSS3实现图片旋转，帮助开发者掌握这一实用技能。 首先...
3D旋转相册（附源码）HTML+CSS+JS
最新发布
02-04
"3D旋转相册"便是其中一种，通过HTML、CSS和JavaScript技术，将传统的静态照片转化为动态的3D效果，为用户带来全新的视觉体验。本文将详细介绍这一技术的实现原理和操作步骤。 一、HTML基础 HTML（超文本标记语言）...
CSS3制作3D图片立方体旋转特效.zip
11-17
在本项目中，"CSS3制作3D图片立方体旋转特效.zip"，我们将探讨如何利用现代Web技术，特别是CSS3，来实现一个引人注目的3D图片立方体旋转效果。这种效果通常用于网站的交互式展示或者动态背景，能够为用户带来视觉上...
div 旋转 html
01-03
div 旋转显示
html如何让div旋转,3种方法（div法、css法、js法）制作html的旋转太极图
weixin_34157892的博客
06-10 4408
1.说明：推荐指数：★★★★通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。2.复习html的结构框架 html结构基本框架代码 3 div法3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。 div法的旋转的太极图div{ width: 0; /*这个高就是黑色圆形和白色圆形的...
怎么写一个可以鼠标控制旋转的div？
Twinkle_sone的博客
10-22 777
鼠标控制元素旋转在现在也是一个很常见的功能，让我们从实现div元素的旋转控制开始来了解元素旋转的具体原理和实现方法吧。
只用一个div画一个太极图
misaka去年夏天的博客
11-29 5399
如题，最近学习css3的时候，比着葫芦画瓢，画了个太极图： Document body { background-color: #abcdef; } #taiji { width: 0px; height: 600px; border-left: 300px solid black; border-right: 300px solid whit
动态太极图html代码,用一个div加一段css代码画一个太极图
weixin_31898831的博客
06-07 1229
[摘要]在王海达博客看到了这段代码，仅使用一个div和css就画出了一个标准的太极阴阳鱼图。在王海达博客看到了这段代码，仅使用一个div和css就画出了一个标准的太极阴阳鱼图。看了下代码，发现其利用了伪元素以及拆分border边框，巧妙的使用css3来实现较为复杂的图案，于是自己动手操作了一下。DEMO对于绝大多数css新手来说，可能一头雾水，这阴阳鱼图案怎么用css来实现呢？如果给你看下面这张图...
用HTML画个太极图
听雨轩
08-18 1617
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;!--下面excanvas.js需下载才能在IE下支持canvas--&gt; &lt;!--[if IE]&am
html 绘制太极
热门推荐
zww学习笔记
10-15 1万+
太极的绘制主要需要用到5个圆，具体代码如下：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .bigCircle{ width: 200px; height: 200px;
html 怎么旋转一个div,css如何实现div一直旋转
weixin_39614750的博客
06-16 1417
css如何实现div一直旋转发布时间：2021-01-07 10:07:12来源：亿速云阅读：156作者：小新这篇文章给大家分享的是有关css如何实现div一直旋转的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。css实现div一直旋转的方法：首先创建一个div元素，并给它一个id值；然后使用内联样式给div添加一些样式；接着使用“@keyframes”规则创建一个动画r...
html怎么让div一直旋转,如何旋转div Html图层？
weixin_42361666的博客
06-10 512
4 个答案:答案 0 :(得分：7)您可以使用cssSandpaper来使用transform属性，该属性可用于旋转Gecko(Firefox)，WebKit(Safari，Chrome)，Opera甚至Internet Explorer中的元素。答案 1 :(得分：2)答案 2 :(得分：1)//// Rotate a element//// - DIV position must be ab...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值