Shulou(Shulou.com)06/01 Report--

This article shows you a good use of pure CSS to draw a Chinese knot and add animation effects, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article, I hope you can get something.

Spring Festival is the most important festival for Chinese people, and there are many customs during the Spring Festival, which vary from east to west, north and south. In order to add flavor to the New year, every household will buy all kinds of New year goods and decorations to make the family prosperous, such as red lanterns, red couplets, red blessing characters, and red Chinese knots.

The raw materials of Chinese knots are simple red ropes, which were cleverly conceived by the ancients and woven into a diamond-shaped grid. The ropes on the grid are closely connected, symbolizing the unity and harmony of the family and their happiness.

So how to use CSS to realize a Chinese knot? Let's look at the final effect first.

So Amazing effect, you can also do it, let's get started!

1. Before coding. Collect materials, the more concise, the better

First search a picture of Chinese knot from the Internet, there is more than one style of Chinese knot, we choose one of the most classic knitting style of Chinese knot. The quality of the picture determines the quality of the final product. Here is a neat and clear picture of the Chinese knot. It can be used as a reference when writing CSS.

two。 Observe the details and conceive the possibility of realization

With the picture, can you start writing code? Of course not.

First of all, think back to what you need to do now: draw a Chinese knot with CSS.

Have you really made up your mind? Is this an achievable goal? Imagine when your leader assigned you a task: let the phone case change color according to the theme color of APP. Will you just start writing code?

You will think of two questions:

Does APP, as a software, have an interface to interact with the phone shell?

How to change color if the mobile phone case receives a color value?

This is an extreme example, neither of the above can be realized. Go back to CSS and this picture of Chinese knot. The first thing we need to think about is which CSS technology we should use to implement this picture. Now look back and take a closer look at the picture.

After a short observation, we found some key points:

The Chinese knot rope is made up of gradual color, crimson, light red, crimson.

The main part in the middle is made up of 22 ropes that cross each other, and the hierarchical order is exchanged at each intersection.

There are some ring-shaped structures, and the process of color gradient is the same as that of straight lines.

The whole is red and embellished with yellow

Then envision the principle of implementation:

Color gradient of a straight line, using linear-gradient or repeating-linear-gradient

Annular gradient, using radial-gradient

Grid crossover, using mask masking to achieve crossover effect

3/4 rings and two curved ropes at the bottom are cut using clip-path

To make coding more convenient, SCSS is used.

You can use:: before:: after implementation in many places to reduce html code

3. Split the structure into parts

The above is viewed from a technical point of view as a whole, and the following is to split the whole picture and first determine its html structure.

A grid structure like a chessboard in the middle, which can be used as a html tag

16 small semicircles around, using 16 tags to locate

Two 3/4 circles, put in a group, using the same style, the second based on the first rotation 180deg

Two cross knots are of the same style, so they are also put in the same group.

The top three small structures are put in a group, and the outer layer is named header

The left and right parts at the bottom are highly similar and are also put in a group, named footer

So we get the structure of html.

In the actual coding, html is not written at once, but has been constantly adjusted to become like this.

Second, CSS realizes the Chinese knot parts one by one. Grid

The final effect of the grid is a diamond, that is, the square rotates the 45deg. Let's not rotate it and see what it looks like.

First set a variable to represent the width of the rope, we set it to-- width, this size is very important, all the subsequent dimensions are based on this width, so later we resize the whole figure, as long as we change this one-- width.

: root {--width: 1.7vh;}

There are 11 ropes vertically and horizontally, and the gap between the ropes is about 0.5 times the width of the rope, so we can get a width of 11 + 0.5 * 10 = 16 times the width of the grid, so we can write like this:

: root {--width: 1.7vh;-- grid-width: calc (var (--width) * 16);} .grid {width: var (--grid-width); height: var (--grid-width);}

Add some styling to body, center the box, and add a dark background

Body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: # 1d1e22; overflow: hidden;}

Add a white background color to .grid and test it:

So a white square appears in the middle of the screen. Let's change the white background to the style of 11 lines:

: root {--width: 1.7vh;-- red-1: # f40001;-- red-2: # d40000;-- red-3: # 8c0703 -- rope: var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55), var (--red-2) calc (var (--width) * 0.75) Var (--red-3) var (--width) -- grid-width: calc (var (--width) * 16);-- bg-line: linear-gradient (90deg, var (--rope), transparent var (--width)) 0 0 / calc (var (--width) * 1.5) calc (var (--width) * 1.5);} .grid {width: var (--grid-width); height: var (--grid-width); background: var (--bg-line);}

You get the following effect:

Maybe you're a little hooked. What happened?

Or to make things a little easier, let's draw a red line without gradual change:

.grid {background: linear-gradient (90deg, var (--red-1), var (--red-1) var (--width), transparent var (--width));}

First there is a linear gradient linear-gradient, then the rotation angle is set to 90deg, let it gradient from left to right (the default is from bottom to top), and then the starting value is set to-- red-1 (you asked me where did red-1 get to red-3? ), also set to-- red-1 at-- width, so you get a red line with a width of-- width. But this is not over, we have to add a transparent transpanrent at-- width so that the color is not filled from-- width to the rightmost side of the graph.

But it's not like a rope that makes the red line change gradually:

.grid {background: linear-gradient (90deg, var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55), var (--red-2) calc (var (--width) * 0.75) Var (--red-3) var (--width), transparent var (--width)) }

In this way, you get a rope with a little stereoscopic effect. But how to make it repeat 11 times horizontally and half a time apart-- width? Look at the following code:

.grid {background: linear-gradient (90deg, var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55), var (--red-2) calc (var (--width) * 0.75) Var (--red-3) var (--width), transparent var (--width)) 0 / calc (var (--width) * 1.5) calc (var (--width) * 1.5) }

Let's find fault: how is this code different from the previous one? With a sharp eye, you may have seen that there is more of this line:

0 / calc (var (--width) * 1.5) calc (var (--width) * 1.5)

With / as the dividing line, the meaning on the left is background-positoin and on the right is background-size.

0 0 is the upper left corner. Calc (var (--width) * 1.5) calc (var (--width) * 1.5) is a square with a width of 1.5 times the width of the rope.

Such a small square, repeated vertically and horizontally, gets the result we want:

But what we want is a grid, and now it's a grid at best.

Then make a copy using the pseudo class and rotate the 90deg:

: root {--width: 1.7vh;-- red-1: # f40001;-- red-2: # d40000;-- red-3: # 8c0703 -- rope: var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55), var (--red-2) calc (var (--width) * 0.75) Var (--red-3) var (--width) -- grid-width: calc (var (--width) * 16);-- bg-line: linear-gradient (90deg, var (--rope), transparent var (--width)) 0 0 / calc (var (--width) * 1.5) calc (var (--width) * 1.5);}. Grid {width: var (--grid-width); height: var (--grid-width); background: var (--bg-line) &: after {content: "; display: block; width: var (--grid-width); height: var (--grid-width); background: var (--bg-line); transform: rotate (90deg);}}

Compare the reference picture:

Can not be said to be completely irrelevant, but others have been knitted by skilled craftsmen, we can only be regarded as a simple superposition, how can we make the top become the bottom?

After careful observation, it is found that the effect of cross-weaving can be achieved as long as the horizontal line above is slightly obscured. Which css attribute is used to implement it? Then it's just mask.

The blue box below is the part that needs to be obscured, and the green box is the part that needs to be repeated.

Carefully analyze the composition of the green box:

In essence, it is to dig two 1 × 1 holes in a 3 × 3 square, with positions of 0 0 and 1.5 respectively. How can we draw such a picture? And apply this picture to mask?

Mask is masked by incoming images. In addition to passing a png into the background image, CSS also has several built-in functions to generate the background image:

Linear-gradient: linear gradient

Repeating-linear-gradient: repeat linear gradient

Radial-gradient: radial gradient

Conic-gradient: cone gradient

These functions can be used with mask. Here we use conic-gradient to implement the above graphics.

To implement the above image with conic-gradient, the idea is the opposite: instead of digging holes in the square, fill the color with the part of multiple rectangles to be rendered, and the rest is naturally transparent:

The CSS implementation is as follows:

: root {...-- conic: # 000 0 90deg, transparent 0 100% }. Grid {. &: after {.-webkit-mask: conic-gradient (from 0deg at var (--width) calc (var (--width) * 1.5), var (--conic)) 0 / calc (var (--width) * 3) calc (var (--width) * 3), conic-gradient (from 90deg at calc (var (--width) * 2.5) 0 Var (--conic)) 0 0 / calc (var (--width) * 3) calc (var (--width) * 3), conic-gradient (from 180deg at calc (var (--width) * 1.5) var (--width), var (--conic) 0 / calc (var (--width) * 3) calc (var (--width) * 3), conic-gradient (from 90deg at 0 calc (var (--width) * 2.5) Var (--conic)) 0 / calc (var (--width) * 3) calc (var (--width) * 3) }}

Preview effect

So far, the complete code

: root {--width: 1.7vh;-- red-1: # f40001;-- red-2: # d40000;-- red-3: # 8c0703 -- rope: var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55), var (--red-2) calc (var (--width) * 0.75) Var (--red-3) var (--width) -- grid-width: calc (var (--width) * 16);-- bg-line: linear-gradient (90deg, var (--rope), transparent var (--width)) 00 / calc (var (--width) * 1.5) calc (var (--width) * 1.5);-- conic: # 000 90deg, transparent 0100%;} body {margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh Background: # 1d1e22; overflow: hidden;}. Grid {width: var (--grid-width); height: var (--grid-width); background: var (--bg-line); &: after {content: ""; display: block; width: var (--grid-width); height: var (--grid-width); background: var (--bg-line); transform: rotate (90deg) -webkit-mask: conic-gradient (from 0deg at var (--width) calc (var (--width) * 1.5), var (--conic)) 0 0 / calc (var (--width) * 3) calc (var (--width) * 3), conic-gradient (from 90deg at calc (var (--width) * 2.5) 0, var (--conic)) 0 / calc (var (--width) * 3) calc (var (--width) * 3) Conic-gradient (from 180deg at calc (var (--width) * 1.5) var (--width), var (--conic)) 0 / calc (var (--width) * 3) calc (var (--width) * 3), conic-gradient (from 90deg at 0 calc (var (--width) * 2.5), var (--conic)) 0 0 / calc (var (--width) * 3) calc (var (--width) * 3) }}

Yes, this figure only uses the .grid label!

But the grid is not enough. Let's move on.

two。 Semicircle

Look back at the reference picture:

Well, the circular gradient, that's radial-gradient:

.ring-small {I {position: absolute; width: calc (var (--width) * 2.5); height: calc (var (--width) * 1.5) Background: radial-gradient (circle at 50% 100%, transparent calc (var (--width) * 0.25), var (--red-3) calc (var (--width) * 0.25), var (--red-2) calc (var (--width) * Var (--red-1) calc (var (--width) *, var (--red-1) calc (var (--width) *), var (--red-2) calc (var (--width) *) Var (--red-3) calc (var (--width) * (0.25 + 1)), transparent calc (var (--width) * (0.25 + 1) }}

So we have half a ring graph, let's use positioning to combine it with the grid.

/ * add a relative positioning to the outermost layer first, and then the absolute positioning is relative to this layer * / .chinese-knot {width: var (--grid-width); height: var (--grid-width); position: relative;}. Ring-small {I {position: absolute; top: calc (var (--width) *-1.5); left: calc (var (--width) * 3);}}

Compared with the material map, it is found that the ring is not directly attached to the grid, but first extends a small straight line, and then the curve. Then let's make it taller:

.ring-small {I {&: before, &: after {content: "; position: absolute; bottom: calc (var (--width) *-0.5 + 1px); width: var (--width); height: calc (var (--width) * 0.5); background: var (--bg-line);} &: after {right: 0;}

Two pseudo classes are used above, and two heightening pads with a height of 0.5x-width are added to the semicircle. The effect is as follows.

Then copy 16 of these graphics and locate them in their respective locations:

.ring-small {I {position: absolute; width: calc (var (--width) * 2.5); height: calc (var (--width) * 1.5) Background: radial-gradient (circle at 50% 100%, transparent calc (var (--width) * 0.25), var (--red-3) calc (var (--width) * 0.25), var (--red-2) calc (var (--width) * Var (--red-1) calc (var (--width) *, var (--red-1) calc (var (--width) *), var (--red-2) calc (var (--width) *) Var (--red-3) calc (var (--width) * (0.25 + 1)), transparent calc (var (--width) * (0.25 + 1) &: before, &: after {content: "; position: absolute; bottom: calc (var (--width) *-0.5 + 1px); width: var (--width); height: calc (var (--width) * 0.5); background: var (--bg-line);} &: after {right: 0 } &: nth-child (- n + 4) {top: calc (var (--width) *-2 + 2px);} &: nth-child (1) {left: calc (var (--width) * 3); &: nth-child (2) {left: calc (var (--width) * 6) } &: nth-child (3) {left: calc (var (--width) * 9);} &: nth-child (4) {left: calc (var (--width) * 12);} &: nth-child (- n + 8): nth-child (n + 5) {bottom: calc (var (--width) *-2 + 2px); transform: rotate (180deg) } &: nth-child (5) {left: calc (var (--width) * 1.5);} &: nth-child (6) {left: calc (var (--width) * 4.5);} &: nth-child (7) {left: calc (var (--width) * 7.5) } &: nth-child (8) {left: calc (var (--width) * 10.5);} &: nth-child (- n + 12): nth-child (n + 9) {left: calc (var (--width) *-2.5 + 2px); transform: rotate (- 90deg);} &: nth-child (9) {top: calc (var (--width) * 3.5) } &: nth-child (10) {top: calc (var (--width) * 6.5);} &: nth-child (11) {top: calc (var (--width) * 9.5);} &: nth-child (12) {top: calc (var (--width) * 12.5) } &: nth-child (- n + 16): nth-child (n + 13) {right: calc (var (--width) *-2.5 + 2px); transform: rotate (90deg);} &: nth-child (13) {top: calc (var (--width) * 2); &: nth-child (14) {top: calc (var (--width) * 5) } &: nth-child (15) {top: calc (var (--width) * 8);} &: nth-child (16) {top: calc (var (--width) * 11);}}

And that's what you get.

Haha, it's like a sewer pipe.

3. 3/4 rings

Let's look at the material first:

Well, I have to wonder if the inspiration of NetEyun's LOGO is the Chinese knot.

A single ring has been realized, and it is not difficult to have two rings:

.ring-big {I {position: absolute; width: calc (var (--width) * 6); height: calc (var (--width) * 6); b {position: absolute; left: 0; top: 0; width: 100%; height: 100% Background: radial-gradient (circle at 50% 50%, transparent calc (var (--width) * 0.5), var (--red-3) calc (var (--width) * 0.5), var (--red-2) calc (var (--width) * Var (--red-1) calc (var (--width) *), var (--red-1) calc (var (--width) * (0.5 + 0.55), var (--red-2) calc (var (--width) * Var (--red-3) calc (var (--width) * (0.5 + 1), transparent calc (var (--width) * (0.5 + 1)), transparent calc (var (--width) * 2), var (--red-3) calc (var (--width) * 2), var (--red-2) calc (var (--width) *) Var (--red-1) calc (var (--width) *), var (--red-1) calc (var (--width) * (2 + 0.55)), var (--red-2) calc (var (--width) * (2 + 0.75), var (--red-3) calc (var (--width) * (2 + 1)) Transparent calc (var (--width) * (2 + 1) }}}

Why should there be another tag in the tag? because next we have to perform clip-path, but also to increase the circle, and clip-path will also cut out the increased part, so we can only cover one more layer to make the inner layer's own clip, and if we increase it, we will use pseudo-class implementation. Here is the code to cut off the lower right corner of the ring 1ax 4 and add a heightening pad:

. ring-big {i {... B {... Clip-path: polygon (00,100%, 100% 50%, 50% 50%, 50% 100%, 0%);} &: before, &: after {content: "; position: absolute; top: calc (var (--width) * 3-1px); left: calc (var (--width) * 3.5); width: calc (var (--width) * 2.5) Height: calc (var (--width) * 0.5 + 2px) Background: repeating-linear-gradient (90deg, var (--red-3), var (--red-2) calc (var (--width) * 0.25), var (--red-1) calc (var (--width) * 0.45), var (--red-1) calc (var (--width) * 0.55) Var (--red-2) calc (var (--width) * 0.75), var (--red-3) var (--width), transparent var (--width), transparent calc (var (--width) * 1.5)) } &: after {transform: rotate (90deg); transform-origin: left top; top: calc (var (--width) * 3.5); left: calc (var (--width) * 3.5 + 1px);}

Make a copy and locate:

.ring-big {I {... &: nth-child (1) {left: calc (var (--width) *-3.5); top: calc (var (--width) *-3.5);} &: nth-child (2) {left: auto; top: auto; right: calc (var (--width) *-3.5) Bottom: calc (var (--width) *-3.5); transform: rotate (180deg);}

At this point, half of the work has been done ~ continue

4. Cross knot

This figure, compared to the above, is no longer difficult, five 1 × 1 squares, and the gradient direction in the middle is perpendicular to the surrounding four.

The square in the middle is implemented by the parent itself, with four around it, with four child tags:

.cross-node {.node {position: absolute; z-index: 2; width: var (--width); height: var (--width); background: var (--bg-line); I {position: absolute; width: var (--width); height: var (--width); background: var (--bg-line); transform: rotate (90deg) &: nth-child (1) {left: calc (var (--width) *-1);} &: nth-child (2) {left: var (--width);} &: nth-child (3) {top: calc (var (--width) *-1); &: nth-child (4) {top: var (--width) } &: nth-child (1) {right: calc (var (--width) *-1); top: calc (var (--width) *-1);} &: nth-child (2) {left: calc (var (--width) *-1); bottom: calc (var (--width) *-1);}

5. Lanyard

In front of us, we all put the Chinese knot in a reclining posture. Before we write about the head and tail, let's straighten it out:

. chinese-knot {... Transform: rotate (- 45deg) translate (calc (var (--width) * 4), calc (var (--width) *-4);}

Look back at the material picture:

First determine the structure of the html:

I is the hanging rope above, b is the ring, and span is the short rope at the joint, with a little yellow decoration. In order to facilitate the adjustment of positioning, we implement it from the bottom up, first write the short rope:

: root {--yellow-1: # fced00;-- yellow-2: # f28a00;-- yellow-3: # da571b;-- bg-yellow: linear-gradient (90deg, var (--yellow-3), var (--yellow-2) 20%, var (--yellow-1) 40%, var (--yellow-1) 60%, var (--yellow-2) 80%, var (--yellow-3) 100%) Header {position: absolute; right: 0; top: 0; transform: rotate (45deg); I {position: absolute; bottom: calc (var (--width) * 1); left: calc (var (--width) *-0.5); width: calc (var (--width) * 1); height: calc (var (--width) * 2); background: var (--bg-line) &: before {content: "; display: block; height: calc (var (--width) * 0.5); background: var (--bg-yellow);}

Then there is the ring:

.header {... B {position: absolute; bottom: calc (var (--width) * 3); left: calc (var (--width) *-1.5); width: calc (var (--width) * 3); height: calc (var (--width) * 3) Background: radial-gradient (circle at 50%, transparent calc (var (--width) * 0.75), var (--red-3) calc (var (--width) * 0.75), var (--red-2) calc (var (--width) * 0.75 + 0.15), var (--red-1) calc (var (--width) * Var (--red-1) calc (var (--width) *), var (--red-2) calc (var (--width) *), var (--red-3) calc (var (--width) *, transparent calc (var (--width) *) }}

Finally, there is a long rope:

.header {... Span {position: absolute; bottom: calc (var (--width) * 5); left: calc (var (--width) *-0.25); width: calc (var (--width) * 0.5); height: calc (var (--width) * 30) Background: linear-gradient (90deg, var (--red-2), var (--red-1) 20%, var (--red-2) 70%, var (--red-3)); border-radius: calc (var (--width) * 0.25);}}

Individual effect

Overall effect

6. Tassel

Determine the html structure:

As you can see, in the tassel part, there are two curved 1-stroke 8 rings, which are represented by two b labels. This shape is still achieved by drawing a complete ring and then cropping it:

.footer {position: absolute; left: 0; bottom: 0; b {position: absolute; width: calc (var (--width) * 15); height: calc (var (--width) * 15) Background: radial-gradient (circle at 50%, transparent calc (var (--width) * 6.5), var (--red-3) calc (var (--width) * 6.5), var (--red-2) calc (var (--width) *), var (--red-1) calc (var (--width) * Var (--red-1) calc (var (--width) *, var (--red-2) calc (var (--width) *), var (--red-3) calc (var (--width) * (6.5 + 1), transparent calc (var (--width) *)) }}

Add cropping and positioning:

.footer {... B {... &: nth-child (1) {left: calc (var (--width) *-8.5); top: calc (var (--width) * 1); clip-path: polygon (50%, 50%, 10%);} &: nth-child (2) {left: calc (var (--width) *-16) Top: calc (var (--width) *-6.5); clip-path: polygon (100% 50%, 50% 50%, 100% 90%);}

Two little tails are realized.

And finally, tassel. First draw the vertical line on the background. Here we use repeating-linear-gradient to implement it. Every 2px, we draw a black line with a 1px width of 0.2opacity:

.footer {.taster {I {position: absolute; width: calc (var (--width) * 2.5); height: calc (var (--width) * 14); background: var (--red-2) repeating-linear-gradient (90deg, rgba (0,0,0,0.2) 0, rgba (0,0,0,0.2) 1px, transparent 1px, transparent 3px) 50% / 3px 1px;}

And covered with a layer of yellow decoration:

.footer {.taster {I {... &: before {content: "; position: absolute; top: calc (var (--width) * 0.5); width: 100%; height: calc (var (--width) * 3.6); background: var (--bg-yellow) Clip-path: polygon (00,100% 0,100% 10%, 0 10%, 0 15%, 100% 15%, 100% 85%, 0 85%, 0 90%, 100% 90%, 100% 100%, 0 100%, 0 100%, 00);}

In the above code, clip-path is used to crop the yellow background to reveal two red lines. The clipping path can be shown in the following figure:

Final result:

Third, add some animation

It was supposed to be over here. But I want to make this Chinese knot have some practical use, such as adding some interaction or something.

Red envelopes are also one of the customs of the Spring Festival, so add a special effect to pull the Chinese knot to drop red packets.

1. Pull it.

It can be achieved by adding a displacement to the Chinese knot in the active state:

.chinese-knot {width: var (--grid-width); height: var (--grid-width); position: relative; transform: rotate (- 45deg) translate (calc (var (--width) * 4), calc (var (--width) *-4); cursor: pointer;-webkit-tap-highlight-color: transparent; transition: all 0.5s &: active {transform: rotate (- 45deg) translate (calc (var (--width) * 2), calc (var (--width) *-2);}

two。 Draw a red packet

First search for a red packet material:

Take a look at the red packet structure, dark red background, light red arc opening, with a yellow round seal, with a traditional opening written on it.

We can determine the html structure first. As the outer layer, rain represents the whole red packet rain, and an I label represents a red packet:

How does a tag implement the three elements mentioned above? Look at the code:

.rain {position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content I {position: relative; display: block; width: calc (var (--width) * 5); height: calc (var (--width) * 8); background: var (--red-3); border-radius: calc (var (--width) * 0.4); overflow: hidden Box-shadow: 0 calc (var (--width) * 1) calc (var (--width) * 1) rgba (0,0,0,0.3); &: before {content: "; position: absolute; left: 50%; transform: translate (- 50%,-50%); width: calc (var (--width) * 8); height: calc (var (- width) * 8) Background: var (--red-1); opacity: 0.5; border-radius: 50%;} &: after {content: "open"; position: absolute; left: 50%; transform: translate (- 50%, 140%); width: calc (var (--width) * 2); height: calc (var (--width) * 2); background: var (--yellow-2) Border-radius: 50%; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: calc (var (--width) * 0.5); color: var (--yellow-1); text-shadow: 1px 1px 0 rgba (0,0,0,0.1);}

Use the I tag itself to achieve the red packet body,: before pseudo-class to achieve arc opening,: after pseudo-class to achieve yellow circular sealing, write words in content.

One red packet is completed, and nine more copies are made:

This gives you 10 red packets fixed at the top and arranged neatly.

3. Red packet rain animation

It's raining, just move from the top down:

.rain {... I {... Animation: fall 3s ease-in infinite;} @ keyframes fall {0% {transform: translate (0,0);} 100% {transform: translate (0, 100vh);}}

Smart you may have guessed such a result: whose rain is so brushed down?

Then we will stagger the vertical position of the red packet and use the random function of sass to achieve random:

.rain {... I {... @ for $I from 1 through 10 {&: nth-child (# {$I}) {top: random (60) + vh;}

Well, the effect is not what I expected. It is still the whereabouts of the brush, but it is just a "staggered" brush.

Then let's just make the start time of each red packet random:

.rain {... I {... @ for $I from 1 through 10 {&: nth-child (# {$I}) {top: random (60) + vh; animation-delay: random (30) * 0.1s;}

Yeah, a little bit better. But there is a problem, the raindrops on the screen, sometimes a lot, sometimes very little, uneven. What if we put the duration of the animation at random?

.rain {... I {... @ for $I from 1 through 10 {&: nth-child (# {$I}) {top: random (60) + vh; animation-delay: random (30) * 0.1s; animation-duration: random (10) * 0.1s + 2s; / * 2s ~ 3s random * /}

Finally more like rain ~

But now the raindrop appears out of thin air and is very stiff. All we have to do is move the starting position to the negative screen, and then let it fall to the positive screen two:

.rain {... Top:-100vh;} @ keyframes fall {0% {transform: translate (0,0);} 100% {transform: translate (0, 200vh);}}

In this way, there will be a steady stream of falling effects.

4. Pull to trigger the rain of red packets.

CSS is not JS, how do you trigger a click event?

We are about to use the characteristics of CSS itself, the checkbox check box has a selected state: checked, and the check box can click to switch this state, and then use CSS's sibling selector element ~ element to achieve the effect of clicking to add styles.

The style can be triggered, so how to trigger the animation?

After the animation attribute is added to the element, the default playback state is running. We need to change the initial playback state to paused (pause), and then change the element's playback status back to running using the above method to achieve the animation playback effect:

.rain {... I {... Animation: fall 3s ease-in infinite; / * does not play animation by default * / animation-play-state: paused;}} # switch {visibility: hidden; pointer-events: none;} / * checkbox play animation when selected * / # switch:checked ~ .rain I {animation-play-state: running } / * reset the animation when you click, otherwise uncheck the checkbox, the animation will stop and stay in the current position * / .chinese-knot:active ~ .rain I {animation: none;}

In the html above, we changed the. chinese-knot from div to label to point to checkbox by setting label's for and checkbox's id to the same value.

The effect is very good, we add a background to the red packet when the rain falls, to remind the user of the current status. And when it rains, the transparency of the Chinese knot is lowered to highlight the sense of existence of the red packet.

.bg {position: absolute; left: 0; top: 0; height: 100vH; width: 100vW; background: linear-gradient (0deg, # 171a4b, # 96367f); opacity: 0; transition: all 0.5s;} # switch:checked ~ .bg {opacity: 1;} # switch:checked ~ .chinese-knot {opacity: 0.2; &: hover {opacity: 0.5;}}

What is the basic syntax of css? the basic syntax of css is: 1, the css rule consists of a selector and one or more declarations; 2, the selector is usually a HTML element that needs to change the style; 3, each declaration consists of an attribute and a value; 4, attributes and attribute values are separated by colons.

The above content is good to use pure CSS to draw a Chinese knot and add animation effects, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.