Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Time:2021-7-20

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Hello everyone, I haven’t published the work “front end daily combat” for some time. Today, the first day of 2020, I will finally start again. I will continue to practice the PBL (project-based learning) learning method, and share my learning notes with you for exchange, discussion and common progress.

During this period of unpublished work, with the support and help of the people’s Posts and Telecommunications Publishing House, I wrote a book named “CSS3 art”, which was born out of more than 100 works of “front end daily actual combat”, including pseudo elements, borders, backgrounds, shadows, cuts, filters, color mixing, variables, counters, transformations, slow motion Animation these concepts are combed and summarized, hoping to provide some help for you to learn CSS. The book has been on the market recently and can be purchased by Jingdong, tmall and Dangdang.

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Next, let’s get down to business. Today’s project is to make a 2020 modeling pattern with pure CSS and add a little animation effect to it.

Effect preview

Press the “click preview” button on the right to preview in the current page, and click the link to preview in full screen.

Code interpretation

1、 Basic DOM structure and page background

The outermost layer of DOM structure<figure>Element to indicate that this is a picture:

<figure></figure>

The page has a dark red background and a grid layout

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkred;
}

figure {
    display: grid;
    grid-template-columns: repeat(8, 1em);
    grid-template-rows: repeat(3, 1em);
    font-size: 60px;
    color: whitesmoke;
}

Grid layout is more semantic than location layout, and the code amount of grid layout is significantly less than that of location layout. This project creates a grid of 3 rows and 8 columns. In order to clearly see the grid lines, we add some auxiliary lines, which will be deleted after the completion of the work

figure {
    background-image: 
        linear-gradient(to bottom, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to right, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to top, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to left, transparent 0%, transparent 99%, pink 100%);
    background-size: 1em 1em;
    background-repeat: repeat, repeat, repeat-x, repeat-y;
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

2、 Draw the number 2

Add the element about number 2 in DOM. Number 2 is divided into four parts

<figure>
    <span class="two part1"></span>
    <span class="two part2"></span>
    <span class="two part3"></span>
    <span class="two part4"></span>
</figure>

The four parts are placed on the corresponding positions of the grid,grid-areaThe attribute X / y of represents the top gridline number and the left gridline number respectively. Gridlines are numbered from 1 to.part4For example, the top grid line is the third from the top, and the left grid line is the second from the left, so its attribute value is3/2

.two {
    background-color: currentColor;
}

.two.part1 {grid-area: 1/1;}
.two.part2 {grid-area: 2/2;}
.two.part3 {grid-area: 3/1;}
.two.part4 {grid-area: 3/2;}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Next, change the shape of each part to fan-shaped,border-radiusProperty has four values, representing the fillet values of upper left, upper right, lower right and lower left, respectively.part4For example, it is a sector with rounded corner at the lower left corner, so its property value is0 0 0 100%

.two.part1 {grid-area: 1/1; border-radius: 100% 0 0 0;}
.two.part2 {grid-area: 2/2; border-radius: 0 0 100% 0;}
.two.part3 {grid-area: 3/1; border-radius: 100% 0 0 0;}
.two.part4 {grid-area: 3/2; border-radius: 0 0 0 100%;}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

At this time, a number 2 has been drawn, and the other number 2 does not need to add DOM element. Just copy the first element. Here we usedrop-shadow()Function, its two parameters represent the offset after copying, where the parameter value is4em 0That is, the horizontal direction is shifted to the right 4em, and the vertical direction is unchanged

.two {
    filter: drop-shadow(4em 0);
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

So far, the two numbers 2 have been drawn.

3、 Draw the number 0

Adding an element about the number 0 in the DOM is different from the number 2. Each number 0 only needs one DOM element, so two numbers 0 need two DOM elements

<figure>
    <span class="two part1"></span>
    <span class="two part2"></span>
    <span class="two part3"></span>
    <span class="two part4"></span>
    <span class="zero copy-1"></span>
    <span class="zero copy-2"></span>
</figure>

Position 2 digits 0 in the grid, still usegrid-areaParameters, but their attribute values are four numbers, the last two numbers represent the bottom grid line number and the right grid line number, respectively

.zero.copy-1 {grid-area: 2/3/4/5;}
.zero.copy-2 {grid-area: 2/7/4/9;}

Draw a rough outline of the number 0. Here, it is drawn by using the border attribute. The width and height of the element itself are 0, but there are 1em borders. The upper and lower borders are white, and the left and right borders are transparent. Note that in CSS, borders do not necessarily exist in the form of lines. Here, each border is a triangle

.zero {
    width: 0;
    height: 0;
    border: 1em solid;
    border-color: currentColor transparent;
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Add fillet effect:

.zero {
    border-radius: 50%;
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Tilt 45 degrees again

.zero {
    transform: rotate(-45deg);
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

So far, the two numbers 0 have been drawn.

4、 Add happy New Year text

Add the element about the text in DOM. There are three words in total, which are represented by three elements respectively

<figure>
    <span class="two part1"></span>
    <span class="two part2"></span>
    <span class="two part3"></span>
    <span class="two part4"></span>
    <span class="zero copy-1"></span>
    <span class="zero copy-2"></span>
    <span class="text happy">happy</span>
    <span class="text new">new</span>
    <span class="text year">year</span>
</figure>

The effect is as shown in the figure below. You can see that these three words are overlapped in the second grid of the first line, because under the grid layout, the unspecified words will be automatically deletedgrid-areaAttribute is placed in an unoccupied grid:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Next, set the grid position for the three text elements:

.text.happy {grid-area: 1/2;}
.text.new {grid-area: 2/4;}
.text.year {grid-area: 1/6;}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

Next, set the style of the text, change the text to capital letters, bold, and use fancy font. In order to avoid being too close to the pattern on the left side, add a little margin on the left side of the text

.text {
    text-transform: uppercase;
    font-size: 0.66em;
    line-height: 1.5em;
    font-weight: bold;
    font-family: cursive;
    padding-left: 0.25em;
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

So far, the text drawing is completed.

5、 Increase animation effect

Because the shape of the number 0 is too abstract, we let the number 0 rotate. The animation is very simple, that is, it rotates continuously at the speed of 4 seconds per circle. Because the number 0 was set to rotate 45 degrees before, the animation is very simpletoThe key frame needs to add 45 degrees, and the degree of rotation is negative, which means counterclockwise rotation

.zero {
    animation: round 4s linear infinite;
}

@keyframes round {
    to {
        transform: rotate(calc(-45deg + -1turn));
    }
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

However, we can see that the number 0 on the left blocks the text “new” when it rotates. In order to avoid blocking, we use the color mixing mode to solve this problem. In this way, when the number 0 overlaps the text “new”, the overlapped part will turn black

.text {
    mix-blend-mode: difference;
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

At this point, the whole work is completed, and the auxiliary line is deleted at last

figure {
    /*background-image: 
        linear-gradient(to bottom, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to right, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to top, transparent 0%, transparent 99%, pink 100%),
        linear-gradient(to left, transparent 0%, transparent 99%, pink 100%);
    background-size: 1em 1em;
    background-repeat: repeat, repeat, repeat-x, repeat-y;*/
}

The effect is as follows:

Front end daily Combat: 170 on the first day of the 1920s, everything has just begun

The complete CSS code is as follows:

body {
    margin: 0;![13.gif](https://segmentfault.com/img/bVbCcYh)
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkred;
}

figure {
    display: grid;
    grid-template-columns: repeat(8, 1em);
    grid-template-rows: repeat(3, 1em);
    font-size: 60px;
    color: whitesmoke;
}

.two {
    background-color: currentColor;
    filter: drop-shadow(4em 0);
}

.two.part1 {grid-area: 1/1; border-radius: 100% 0 0 0;}
.two.part2 {grid-area: 2/2; border-radius: 0 0 100% 0;}
.two.part3 {grid-area: 3/1; border-radius: 100% 0 0 0;}
.two.part4 {grid-area: 3/2; border-radius: 0 0 0 100%;}

.zero.copy-1 {grid-area: 2/3/4/5;}
.zero.copy-2 {grid-area: 2/7/4/9;}

.zero {
    width: 0;
    height: 0;
    border: 1em solid;
    border-color: currentColor transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
    animation: round 4s linear infinite;
}

@keyframes round {
    to {
        transform: rotate(calc(-45deg + -1turn));
    }
}

.text.happy {grid-area: 1/2;}
.text.new {grid-area: 2/4;}
.text.year {grid-area: 1/6;}

.text {
    text-transform: uppercase;
    font-size: 0.66em;
    line-height: 1.5em;
    font-weight: bold;
    font-family: cursive;
    padding-left: 0.25em;
    mix-blend-mode: difference;
}

reference resources

  • Grid layout, CSS3 art, section 1.8.2;
  • Drop shadow() function, CSS3 art, Section 5.2;
  • Border radius fan shape, section 3.3.3 of CSS3 art;
  • Border radius pattern modeling, CSS3 art, section 3.3.5;
  • Animation, CSS3 art, Chapter 10;
  • Mix blend mode, CSS3 art, section 6.3.3.