Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to create pixel creative animation with CSS box-shadow". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Code

Text 1. Principle

What we need to do is pixel painting, and pixel painting is made up of small blocks of pixels. Since we are going to use box-shadow to implement the drawing, let's first talk about which parameters box-shadow can pass to enable him to implement a small block of pixels.

Usually we use box-shadow will pass in five parameters, namely x offset, y offset, shadow blur radius, shadow spread radius, shadow color, then, we draw a 10x10 pixel rectangular projection (note: here width and height determine the pixel when the pixel is displayed).

.box {width: 10px; height: 10px; background-color: red; / * x offset | y offset | Shadow blur radius | Shadow spread radius | Shadow color * / box-shadow: 10px 10px 10px 10px black;}

But we draw pixel painting to cancel its shadow, you can use the optional parameter inset, if you do not specify inset, the default shadow is outside the border, that is, the shadow spreads outward. Using the inset keyword causes the shadow to fall inside the box, making it look as if the content is suppressed. The shadow will be within the border (even the transparent border), above the background, and below the content.

Next, add inset to draw the rectangle to see the changes.

.box {width: 10px; height: 10px; background-color: red; / * x offset | y offset | Shadow blur radius | Shadow diffusion radius | Shadow color | Shadow inward diffusion * / box-shadow: 10px 10px 10px 10px black inset;}

Such a small pixel block appears, and the original red background is covered, but Cheng Ye inset is also inset. It is precisely because he can hold down the box, but also limited by the size of the box, and can not well arrange a large number of pixel blocks, so give up this method.

Now let's change our thinking. Since we don't want the shadow to be displayed, let's just not pass in the shadow-related information, so we just need to pass in the x offset, the y offset, and the shadow color to achieve this small pixel block.

.box {width: 10px; height: 10px; background-color: red; / * x offset | y offset | Shadow color * / box-shadow: 10px 10px black;}

Look, we have also implemented a small pixel block, but we will find another small problem.

.box {width: 10px; height: 10px; background-color: red; box-shadow: 0px 0px black, 10px 10px black, 20px 20px black, 30px 30px black, 40px 40px black;}

When we are inline, we will find that the pixel block of the origin cannot be covered, because it is always in the lower layer, even if the background of the main block becomes transparent, but we can be glad that there is only one point like this. we will naturally solve the problem by filling the points of the main block.

Then, we keep connecting to the box-shadow to draw the graph, and we will find that a pixel painting is complete.

two。 Animation

In the last step, we drew the shape of the light bulb, but we want that kind of flash effect, how does it come out in box-shadow? In fact, one of the most violent ways is to draw a glowing effect and replace the grid from time to time to achieve the glowing effect.

But what does a light bulb mean? Represents inspiration, how can we use violent means to draw it, so the size of the style script is very large, need to be elegant.

So, I use scss in the code to extract a lot of things and disassemble part of the light bulb, such as:

$size:10px;$light-color:rgb (75, 1*$size 1*$size 73, 81); $wick-color:rgb (130129136); $line-color:rgb (12, 12, 12); $bottom-color:rgb (153152157); $active-bottom-color:rgb (185182193); $active-light-color:rgb (241218126); $active-wick-color:rgb (255236201); $light-bg:-1*$size 1*$size 0$ light-color, 1*$size 1*$size 0$ light-color, / /.-3*$size 5*$size 0$ light-color $wick-active:-1*$size 0 rgb (248 1*$size 7*$size 203 rgb), / /. Wick:-1*$size 0$ wick-color, / /. 1*$size 7*$size 0$ wick-color; / /. More

Finally, all we have to do is to reassemble these parts and turn them into light bulbs again. Of course, flicker animation is also stitched together.

.light {width:$size; height:$size; position: absolute; left:50%; top:50%; transform: translate (- 50% background-color:$light-color; box-shadow: $line, $wick, $light-bg, $light-bottom; animation:flash 2s linear infinite;} @ keyframes flash {0% 58% 58% 78% 94% {background-color:$light-color) Box-shadow: $line, $wick, $light-bg, $light-bottom;} 50% {background-color:$active-wick-color; box-shadow: $line-active, $wick-active, $light-bg-active, $light-bottom-active;}}

Finally, we have to add a manual lighting effect is also very simple. Is to use the checked pseudo-class when checkbox is selected to find the div.light trigger lighting effect, of course, the style still requires you to draw and splice in advance.

.point {&: checked + .light {animation:none; background-color:$active-wick-color; box-shadow: $line-active, $wick-active, $light-bg-active, $light-bottom-active, $light-star This is the end of "how to create Pixel Creative Animation with CSS box-shadow". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.