|
1.說明： 推薦指數(shù)：★★★★ 通過動畫太極的方法，增加學習興趣，對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內(nèi)有一個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;}/*旋轉角度函數(shù)定義*/@-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是動起來的函數(shù)，在最后面設置和定義*/ 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動起來的函數(shù)定義*/@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內(nèi)容就這樣寫在下面，如果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放在同一個文件夾下 //注意到?jīng)]有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(); // 注意幾個函數(shù)數(shù)值的關系，120,60，半徑和坐標的關系，如果要縮小半徑，那么坐標也需要調(diào)整 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(); //畫圓的函數(shù)：-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 值得收藏，慢慢回味。
|
