💡 project address: games.git 🎮 Start game: start

preface

This article mainly talks about the wonderful shadow, explores the possibility of the front end separating from IMG, and practices the page –developers

basis

Before analyzing shadow, let’s take a quick look at the basic properties of box-shadow

boxShadow: 10px 10px 5px 10px #888888 outset;
box-shadow: h-shadow v-shadow blur spread color inset;
Copy the code

boxShadow: 10px 10px 5px 10px # 888888 the outset,
    20px 10px 10px 15px # 888888,
    10px 10px 10px 20px # 888888;
Copy the code

Let’s start with 🌰

Let’s just split up the elements

  • Big Bottom planet (How does this little guy look familiar, 23333)
  • Twinkle little star
  • A shooting star for wishing
  • Bright big star

The background is a simple gradient

background: linear-gradient(to bottom, #081d3e, #214f9f);
Copy the code

Bottom planet

box-shadow: 
    200px -20px 50px #58d1ff, 
    -200px -20px 50px #783be7, 
    0px -2px 5px #ffffff, 
    inset 0px 0px 15px rgba(125, 135, 255, 1);
Copy the code

Effect:

Little stars

Small stars are simpler, an ✨ entity with a white outer shadow

First time plotting the home star, striving for perfection, plotting it

background: 
    radial-gradient(circle at top left, transparent 3px, #fff 0) top left,
    radial-gradient(circle at top right, transparent 3px, #fff 0) top right,
    radial-gradient(circle at bottom right, transparent 3px, #fff 0) bottom right,
    radial-gradient(circle at bottom left, transparent 3px, #fff 0) bottom left;
Copy the code

However, it was found that the child star copied by shadow could not restore the shape of the parent star. In fact, the element shape of the parent star did not change, we just changed the background color

@width: 500;
@hight: 650;
@count: 12;
@random: `Math.random() `;
@0px: 0px;
.getShadow(@top, @left) {
  box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
}

.loopShadow(@i) when (@i < @count) {
  @top: floor(@random* @hight) + @0px;
  @left: floor(@random* @width) + @0px;
  .getShadow(@top, @left);
    // box-shadow+: @left @top #fff, @left @top 8px 1px #fff;
  .loopShadow(@i+1);
}
Copy the code

I started with the commented line of code. Normally, the @left and @top used twice in a loop should have the same value, but the @left and @top used twice in a loop are different, causing the star and the luminous background to be separated. However, using the function to create a separate scope can also achieve the effect of alternating flickering. You can copy two elements as follows

A shooting star

codepen–shooting-star-demo

Big star

codepen–star-demo
codepen–Fire

Take a look at the final effect (temporarily not suitable for PC)

You can see that the overall implementation is not satisfactory except for a slight difference in color values and that flare

Shadow animation

  • Simple version fireworks, see the effect first

    The idea is to create an equal number of shadows at the origin, and an equal number of shadows in the animation, just by changing the position, so that we have the effect of scattering from the point, plus the animation of the beginning of the pop and the final drop.

  • Add a little math, a little control over where the fireworks scatter, like Descartes confessing to the goddess at ❤️ (non-existent)

codepen–LOVE

Finally, there is a small flaw. Fireworks are not evenly distributed at the landing point on the curve, and they are more sparse at the place with a large slope. The reason is that our constructor is uniform on an axis, and there is no issue on the rate of change

conclusion

Finally, let’s summarize shadow’s abilities. In addition to literally creating inside and outside shadows, we can actually create any element (position, size, color, out-of-focus distance). In addition to combining animation, making gradient animation on these attributes is far better than using JS to create the same effect dom animation. After all, there is no need to create DOM elements for shadow rendering. When you open the Chrome console, you can see that the browser gives the entire shadow created area to the GPU as a GraphicsLayer. As for the specific details of rendering, we will not dig into them for the moment, and we will discuss them in a topic later.

A placeholder

Front End Series — Project construction Front end series — Project organization