html中⼩圆圈⽤代码怎么写_3种⽅法(div法、css法、js法)
制作html的旋转太极图...
1.说明:
推荐指数:★★★★
通过动画太极的⽅法,增加学习兴趣,对html的结构和css、JavaScript、div的认识和了解会逐步深⼊。
2.复习html的结构框架
html结构基本框架代码
3 div法
3.1 代码:复制下⾯的代码,命名为:div法.html,⽤浏览器打开即可。
div法的旋转的太极图
3.2 效果图
4 css法
4.1 css法.html代码
css法的旋转的太极图
4.2 tj.css代码:注意与上⾯两个⽂件放在同⼀个⽂件夹下
.tj{ width: 100px; height: 200px; border: solid black; border-width: 2px 100px 2px 2px; background-color: #fff; border-radius: 50%; position: ab
4.3 效果图
5 js法=就是JavaScript法
5.1 js法.html代码:
js法的旋转的太极图
5.2 script.js代码:与上⾯html放在同⼀个⽂件夹下
//注意到没有null=0,效果是⼀样的var angle = 0;//var canvas = null;//var ctx = null;var canvas = 0;var ctx = 0;function main(){ window.setInterval(function() { 5.3 效果图
6 值得收藏,慢慢回味。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论