今天童心未泯，玩起了大风车，特别好玩，大家一定不要忘记儿时的梦想，吹吹大风车，转出好心情
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/index.css" /> 7 <script src="js/ajax.js"></script> 8 </head> 9 <body> 10 <div id="boss"> 11 <div class="col"> 12 <div></div> 13 <div class="arc1"></div> 14 </div> 15 <div class="rew"> 16 <div></div> 17 <div class="arc3"></div> 18 </div> 19 <div class="rew"> 20 <div class="arc4"></div> 21 <div></div> 22 </div> 23 <div class="col"> 24 <div class="arc2"></div> 25 <div></div> 26 </div> 27 </div> 28 </body> 29 </html>
CSS代码是用less生成的，所以有些繁琐，大家见谅^_^
1 @import "quanju.css"; 2 #boss { 3 width: 400px; 4 height: 400px; 5 margin-left: -200px; 6 margin-top: -200px; 7 position: fixed; 8 left: 50%; 9 top: 50%; 10 z-index: 99; 11 } 12 #boss > div { 13 width: 200px; 14 height: 200px; 15 float: left; 16 } 17 #boss .col { 18 display: flex; 19 flex-direction: row; 20 } 21 #boss .col div { 22 flex: 1; 23 } 24 #boss .col .arc1 { 25 border-top-left-radius: 100px; 26 border-bottom-left-radius: 100px; 27 background: red; 28 } 29 #boss .col .arc2 { 30 border-top-right-radius: 100px; 31 border-bottom-right-radius: 100px; 32 background: green; 33 } 34 #boss .rew { 35 display: flex; 36 flex-direction: column; 37 } 38 #boss .rew div { 39 flex: 1; 40 } 41 #boss .rew .arc3 { 42 border-top-right-radius: 100px; 43 border-top-left-radius: 100px; 44 background: yellow; 45 } 46 #boss .rew .arc4 { 47 border-bottom-right-radius: 100px; 48 border-bottom-left-radius: 100px; 49 background: dodgerblue; 50 } 51 #gun { 52 width: 3px; 53 height: 300px; 54 background: brown; 55 margin-left: -1px; 56 position: fixed; 57 left: 50%; 58 top: 50%; 59 } 60 #bos { 61 width: 800px; 62 height: 70px; 63 background: deepskyblue; 64 margin: 0 auto; 65 text-align: center; 66 line-height: 70px; 67 font-size: 30px; 68 color: white; 69 }
JS代码是实现效果的代码，绝对不能少
1 window.onload = function(){/*onload方法，使函数体在布局代码实现后运行*/ 2 var obj = new func();/*面向对象*/ 3 4 function func() 5 { 6 this.boss = document.getElementById("boss");/*获取旋转元素*/ 7 this.num = 0;/*声明变量，存储旋转角度*/ 8 9 this.rotate_time = function(){ 10 setInterval(function(){/*使用定时器，每10毫秒旋转一次*/ 11 obj.num = obj.num - 1; 12 obj.boss.style.webkitTransform = "rotate("+obj.num+"deg)" 13 },10)/*因为间隔时间很短，所以看上去就是风车旋转的效果了^_^*/ 14 } 15 } 16 obj.rotate_time();/*调用函数*/ 17 }
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
