|
1.说明： 推荐指数：★★★★ 通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。 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 效果图 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 效果图 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 效果图 6 值得收藏，慢慢回味。
|
