今天get的新东西transform+animation （css3动画）

今天学到的新东西，利用transform+animation （css3动画）+js的random数据出的一幅星空图；
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         #wrapper {
14             width: 700px;
15             height: 500px;
16             background: #000;
17             position: relative;
18             margin-top: 20px;
19             left: 50%;
20             margin-left: -350px;
21         }
22         #wrapper .mooon {
23             width: 50px;
24             height: 50px;
25             background: #ffffff;
26             border-radius: 40px;
27             box-shadow: 0 0 15px #ffffff;
28             position: absolute;
29             top: 40px;
30             left: 80%;
31             z-index: 999;
32             animation: moonmove 30s linear;
33         }
34         @-webkit-keyframes moonmove {
35             0% {top: 200px ;left: 0%; opacity: 0;box-shadow: 0 0 5px #ffffff;}
36             30% {top: 100px;left: 40%;opacity: 0.5;box-shadow: 0 0 10px #ffffff;}
37             80% {top: 40px;left: 80%; opacity: 1;box-shadow: 0 0 15px #ffffff;} 
38         }
39         #wrapper .star {
40             width: 20px;
41             height: 20px;
42             background: url("images/star.png") no-repeat;
43             position: absolute;
44             background-size: 100% 100%;
45             animation: starmove 1s alternate infinite;
46         }
47         @-webkit-keyframes starmove {
48             0% {opacity: 0;}
49             100% {opacity: 1;}
50         }
51         #wrapper .star:hover {
52             transform: scale(2, 2) rotate(180deg) !important;
53             transition: all 1s;
54         }
55     </style>
56 </head>
57 <body>
58     <div id="wrapper">
59         <div class="mooon"></div>        
60     </div>
61     <script>
62         window.onload = function() {
63             var wrapper = document.getElementById("wrapper");
64             var wrapperWidth = wrapper.offsetWidth;
65             var wrapperHeight = wrapper.offsetHeight;
66             for (var i = 0; i < 120; i ++){
67                 var temp = document.createElement("span");
68                 temp.setAttribute("class","star");
69                 var x = Math.floor(Math.random() * wrapperWidth);
70                 var y = Math.floor(Math.random() * wrapperHeight);
71                 temp.style.left = x + "px";
72                 temp.style.top = y + "px";
73                 var scale = Math.random() * 1.2;
74                 temp.style.transform = 'scale('+ scale + ', ' + scale + ')';
75                 var rate = Math.random() * 1.5;
76                 temp.style.animationDelay = rate + 's';
77                 wrapper.appendChild(temp);
78             }
79         }
80     </script>
81 </body>
82 </html>
Code