大風車吱呀吱悠悠地轉

時間 2019-11-21

標籤風車悠悠简体版

原文原文鏈接

今天童心未泯，玩起了大風車，特別好玩，你們必定不要忘記兒時的夢想，吹吹大風車，轉出好心情css

 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生成的，因此有些繁瑣，你們見諒^_^html

 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代碼是實現效果的代碼，絕對不能少web

 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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。