Starting from web Front End to Actual Warfare: Realizing Star Animation with css and less

The effect map is as follows:

Knowledge Point Preview

less Skills + css Skills in this article include:

  • How less Writes Cycles
  • How to use js expression in less
  • css3 attribute: how box-shadow generates hundreds of stars
  • css3 attribute: background: radial-gradient radial gradient, how to generate gradient background color

HTML document structure

First, the html file structure is simple, as follows:

<div>
    <div id="start1"></div>
    <div id="start2"></div>
    <div id="start3"></div>
</div>
web front-end development learning Q-q-u-n:784783012, sharing learning methods and small details, constantly updating the latest teaching and learning methods (detailed front-end project teaching video)

Step 1: Radil-gradient generates a gradient background

Set it on 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 results are as follows:

In order to compare the background picture I painted with pure black, and then put a pure black picture to compare, it can be seen that the picture above is not so black, a little gray.

Here is an introduction to radial-gradient parameters

  • ellipse shows that I use elliptical gradients, and you can see how to use them in the following figure

// The parameters in the figure above are
radial-gradient(ellipse,#ffffff, #6a6a6a)
web Front-end development learning Q-q-u-n: 784783012 ,Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)

That is, the color is white # ffff to gray # 6a6a elliptical gradient.

  • at bottom, the center of the ellipse is at the bottom. See the figure below for details.

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

Well, at this point, we're done with 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 loops in less. See the less code below.

2.1 How Less Realizes Cycles

Examples are as follows:

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

//Compilation 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, meaning that a loop function is defined.
  • @ counter is a variable of an incoming function
  • When (@counter > 0) means that when the value of a variable @counter > 0, the function will execute.
  • Loop (@counter-1)) This is a recursive call

So we conclude that less implements loops by recursively calling defined functions

The second problem 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); //Recursive call itself
}
div{
  .loop(2);
}

// The generated code is as follows
div {
  padding: 4;
  padding: 3;
}
web Front-end development learning Q-q-u-n: 784783012 ,Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)

So we conclude that the way to use js expressions in less is to start with ~and then `wrap up expressions'.

Then the third problem is how to generate hundreds of stars with box-shadow attributes.

2.3 How to use less cycle to generate hundreds of stars on box-shadow attributes

These stars are actually square dots. Our husband has four 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, box-shadow values are used to generate squares.

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

Next, we need to combine less cycles to generate more boxes (stars) on box-shadow s:

// First, we define a mixin function with the parameter @n, provided 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 includes three parameters.

  • Generated values of 0-2000 random numbers on the x-axis (Math. round (Math. random ()* 2000) +'px')
  • The value of y-axis is 0-2000 random number (Math. round (Math. random ()* 2000) +'px FFF'`)
  • The color is # FFF

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

Step 3: Combining 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>
web front-end development learning Q-q-u-n:784783012, sharing learning methods and small details, constantly updating the latest teaching and learning methods (detailed front-end project teaching video)

less is as follows:

// start1 produces 700 stars 1 PX long and 1 PX wide, which are small stars.
// Small stars represent distant stars, big stars represent close ones, so there is a sense of space.
#start1 {
    .mixin(700);
    width: 1px;
    height: 1px;
    animation: animStar 50s linear infinite;
    animation-delay:-10s;
}
// Start 2 generates 200 stars 2 PX long and 2 PX wide.
#start2 {
    .mixin(200);
    width: 2px;
    height: 2px;
    animation: animStar 100s linear infinite;
    animation-delay:-8s;
}
// Start 3 generates 100 stars 3 PX long and 3 PX wide.
#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) }
}

If you are interested in programming, web front-end, want to know about learning, and want to know more about friends in this industry, you can add our front-end learning button qun: 784783012. Whether you are a student or a friend who wants to change careers, I welcome you to share dry goods from time to time, and organize a new web front-end learning material of 2019. Share it with the 0 Basic Introduction Course. We are serious about learning the front-end.
At the end of this article, you can try codepen on your own. Hey hey

Tags: less Attribute css3 Programming

Posted on Thu, 26 Sep 2019 09:21:21 -0400 by russ8