Example code of implementing starry sky animation with CSS3 advanced LESS

This article introduces the sample code of advanced CSS3 LESS to realize starry sky animation, which is shared with you as follows:

The effect animation is as follows:

Preview link and code in my codepen: https://codepen.io/lio-mengxiang/pen/YzKrEde

Knowledge Point Preview

The less skills + css skills knowledge points of this article include:

• How to write a loop in less
• How to use js expressions in less
• CSS3 property: How box-shadow generates hundreds of stars
• CSS3 property: background: radial-gradient, how to generate a 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>

Step 1: radial-gradient generates a 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%;
}

The effect is as follows:

In order to compare, the background image I drew is not pure black, so I put a pure black image for comparison. You can see that the image above is not that black, it is a bit gray.

Here is the radial-gradient parameter introduction

ellipse indicates that I am using an elliptical gradient. You can see how to use it by looking at the picture below.

// The parameters of the above picture are radial-gradient(ellipse,#ffffff, #6a6a6a)

That is, the color is an elliptical gradient from white #ffffff to gray #6a6a6a

at bottom This means that the center of the elliptical gradient is at the bottom. Please see the following figure for the specific effect:

// The parameters of the above picture are radial-gradient(ellipse at bottom,#ffffff, #6a6a6a)

Okay, at this point, we have completed the gradient

Step 2: How box-shadow generates hundreds of stars

First we need to solve three problems. The first one is how to write a loop using less. Please see the following less code (detailed explanation is below the code)

2.1 How to implement loop in less

Here are some examples:

.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px*@counter);
  }
  .loop((@counter - 1)); //recursively call itself}
div{
  .loop(5);
}

//Compile and output div .h5 {
  padding: 50px;
}
div .h4 {
  padding: 40px;
}
div .h3 {
  padding: 30px;
}
div .h2 {
  padding: 20px;
}
div .h1 {
  padding: 10px;
}

• .loop(@counter) when(@counter > 0) is a function in less, which means a loop function is defined
• @counter is the variable passed into the function
• when(@counter > 0) means that this function will be 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 loops is to recursively call the defined function.

Next, let’s solve the second problem, which is 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);
}

//Generate the following code div {
  padding: 4;
  padding: 3;
}

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

Next, we will solve the third problem, which is how to use the box-shadow property to generate hundreds of stars.

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

These stars are actually small square dots. We first generate 4 small square dots.

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

The effect is as follows

Here, multiple box-shadow values ​​are used to generate a square.

// For example, the following attribute 10px 0px #9bcded means that there is a small dot of color #9bcded at 10px on the x-axis and 0px on the y-axis relative to the div element. // Because the div itself is a square with a width of 10px and a height of 10px, its box-shadow is also a square box-shadow: 10px 0px #9bcded,
width:10px;
height:10px;

Next, we need to combine the less loop to generate more blocks (stars) on the box-shadow:

// First define a mixin function with parameter @n. The condition is that the code in the function is executed only when @n > 0.mixin(@n) when(@n > 0) {
    box-shadow+ : ~`Math.round(Math.random() * 2000) + 'px' + ' ' +Math.round(Math.random() * 2000) + 'px #FFF' `;
    .mixin((@n - 1));
 }

The above function is mainly in box-shadow, which mainly includes 3 parameters

• Generates random values ​​from 0 to 2000 on the x-axis (Math.round(Math.random() * 2000) + 'px')
• Generates random values ​​from 0 to 2000 on the y-axis (Math.round(Math.random() * 2000) + 'px #FFF' `)
• The color is #FFF

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

Step 3: Combine HTML to generate stars

The previous html structure is as follows

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>

The less is as follows:

// start1 generates 700 stars of 1px in length and 1px in width. These are small stars. // Small stars represent stars that are far away, and large stars represent stars that are close, so that there is a sense of space. #start1 {
    .mixin(700);
    width: 1px;
    height: 1px;
    animation: animStar 50s linear infinite;
    animation-delay:-10s;
}
// start2 generates 200 stars with a length of 2px and a width of 2px #start2 {
    .mixin(200);
    width: 2px;
    height: 2px;
    animation: animStar 100s linear infinite;
    animation-delay:-8s;
}
// start3 generates 100 stars with a length of 3px and a width of 3px #start3 {
    .mixin(100);
    width: 3px;
    height: 3px;
    animation : animStar 150s linear infinite;
    animation-delay:-5s;
}
// The animation effect is as follows @keyframes animStar {
    from { transform: translateY(0px) }
    to { transform: translateY(-2000px) }
}

This article is finished. You can go to codepen to try the effect yourself.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.