The effect GIF is as follows:

Codepen. IO/compared – mengxia…

Knowledge preview

This article’s less tips + CSS tips include:

  • How does less write loops
  • How to use JS expressions in less
  • Css3 properties: How does box-shadow generate hundreds of stars
  • Css3 attributes: background: radial gradient, how to generate gradient background color

HTML Document structure

First, the HTML file structure is very simple, as follows:

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>
Copy the code

The first step: radial-gradient generates the gradient background

Set on the HTML and body tags

* {
    padding: 0;
    margin: 0;
}

html, body {
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    overflow: hidden;
    height: 100%;
}
Copy the code

The effect is as follows:

The radial-gradient parameter is introduced here

  • Ellipse indicates that I am using an ellipse gradient. Can you see how it is used

// The argument in the figure above is radial-gradient(Ellipse,#ffffff, #6a6a6a)
Copy the code

The color is an elliptical gradient from white # FFFFFF to gray # 6A6A6A

  • This shows that the center of the ellipse gradient is at the bottom.

// The parameter in the figure above is radial-gradient(Ellipse at bottom,#ffffff, #6a6a6a)
Copy the code

Ok, so at this point, we’re done with the gradient

Step 2: How does box-shadow generate hundreds of stars

The first is how to write loops in less. See the following less code (explained in detail below).

2.1 How to realize the loop of less

Examples are as follows:

.loop(@counter) when(@counter > 0) { .h@{counter} { padding: (10px*@counter); } .loop((@counter - 1)); // Recursively call itself} div{.loop(5); } // Compile output div.h5 {padding: 50px; } div .h4 { padding: 40px; } div .h3 { padding: 30px; } div .h2 { padding: 20px; } div .h1 { padding: 10px; }Copy the code
  • .loop(@counter) when(@counter > 0) less
  • @counter is the variable passed in to the function
  • When (@counter > 0) means that the function is executed when the value of the variable @counter > 0
  • .loop((@counter-1)) This is a recursive call

So we conclude that the way less implements the loop is to recursively call the defined function

Then solve the second problem, how to write JS expressions in less

2.2 How to Write JS expressions in less

.loop(@counter) when(@counter > 0) {padding: ~ '@{counter} + math.round (2.4)'; .loop(@counter - 1); // Recursively call itself} div{.loop(2); } div {padding: 4; padding: 3; }Copy the code

So we concluded that the way to use js expressions in less is to start with ~, and then wrap the expression

Then solve the third problem, which is how to generate hundreds of stars with the box-shadow property

2.3 How to generate hundreds of stars on box-shadow property with less loop

These stars are actually dots of a square, and we have four dots of a square

// 
div
{
	width:10px;
	height:10px;
	box-shadow: 10px 0px #9bcded, 50px 0px #9bcded, 10px 40px #9bcded, 50px 40px #9bcded;
}
Copy the code

Results the following

10px 0px for example#9bcded indicates a small dot with the color #9bcded at 10px x and 0px y relative to the div element// Since the div itself is a square width 10px height 10px, its box-shadow is also a square box-shadow: 10px 0px#9bcded,
width:10px;
height:10px;
Copy the code

Next, we’ll combine the less loop to generate more squares (stars) on box-shadow:

Mixin (@n) when(@n > 0) {box-shadow+ : @n (@n > 0) {box-shadow+ : @n (@n > 0); ~`Math.round(Math.random() * 2000) +'px' + ' ' +Math.round(Math.random() *  2000) + 'px #FFF' `;
    .mixin((@n - 1));
 } 
Copy the code

The above function is mainly in box-shadow and mainly contains three parameters

  • Math.round(math.random () * 2000) + ‘px’)
  • Math.round(math.random () * 2000) + ‘px #FFF’ ‘)
  • The color is # FFF

If we call mixin(100), it generates 100 white squares (stars) on a 2000 * 2000 background.

Step 3: Combine HTML to generate stars

The previous HTML structure was <div> <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>
Copy the code

Less is as follows:

// Start1 generates 700 stars 1px by 1px. These are small stars. // Small stars represent distant stars, and large stars represent close ones#start1 {.mixin(700); width: 1px; height: 1px; animation: animStar 50s linear infinite; animation-delay:-10s; } // start2 generates 200 stars 2px by 2px#start2 {.mixin(200); width: 2px; height: 2px; animation: animStar 100s linear infinite; animation-delay:-8s; } // start3 generates 100 stars 3px by 3px#start3 {.mixin(100); width: 3px; height: 3px; animation : animStar 150s linear infinite; animation-delay:-5s; } @frames animStar {from {transform: translateY(0px)} to {transform: translateY(-2000px)}}Copy the code

The end of this article, you can go to Codepen to try the effect oh, hey hey