熟悉scss 

 1 //html
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>满天星</title>
 7         <link rel="stylesheet" type="text/css" href="css/star.css"/>
 8     </head>
 9     <body>
10         <div class="star-1"></div>
11         <div class="star-2"></div>
12         <div class="star-3"></div>
13     </body>
14 </html>
 1 //scss
 2 @function minStar( $n ){
 3      $value:"#{random(2000)}px #{random(2000)}px #fff";
 4     @for $i from 1 through $n{
 5        $value:#{$value},#{random(2000)}px #{random(2000)}px #fff;
 6     }
 7     @return $value;
 8 }
 9 html{
10     height: 100%;
11     background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);;
12     overflow: hidden;
13 }
14 .star-1{
15     width: 1px;
16     height: 1px;
17     box-shadow:minStar(700);
18     color: #fff;
19     position: absolute;
20     top: 0;
21     animation: move1 5s infinite linear;
22     
23 }
24 .star-2{
25     width: 1.5px;
26     height: 1.5px;
27      position: absolute;
28     top: 0;
29     box-shadow: minStar(700);
30     color: #fff;
31      animation: move1 10s infinite linear;
32 }
33 .star-3{
34     width: 2px;
35     height: 2px;
36      position: absolute;
37     top: 0;
38     box-shadow: minStar(700);
39     color: #fff;
40      animation: move1 15s infinite linear;
41 }
42 @keyframes move1{
43     0%{
44         top: 0;
45     }
46     100%{
47         top:-500px;
48     }
49 }

 

posted @ 2016-10-19 20:42  郑福坤  阅读(189)  评论(0)    收藏  举报