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 }