今天学到的新东西 ， 利用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>