大风车吱呀吱悠悠地转

2019-02-25 16:10:42来源：博客园阅读 ()

今天童心未泯，玩起了大风车，特别好玩，大家一定不要忘记儿时的梦想，吹吹大风车，转出好心情

 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 }