“Front end daily combat” work No. 172: pay tribute to the ordinary and great medical staff!

Time:2020-10-27

This is a battle without gunpowder smoke. What we ordinary people can do is to stay at home and wait for the epidemic to end. To those who risk their lives to rescue patients, salute!

Effect preview

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

Source code download

For the full source code of daily front end combat series, please download it from GitHub:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

1、 Define DOM structure

The DOM structure is a.wordsContainer containing 5<p>Tags, each<p>There is a sentence in the label:

<div class="words">
    <p>You guys</p>
    <p>In the absence of gunpowder smoke</p>
    <p>On the battlefield</p>
    <p>The light of life</p>
    <p>Rekindling</p>
</div>

Center container on page:

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

The effect is as follows:

2、 Layout text

Using flex layout, set the width of the container to5emBecause there are five<p>Tags, so each sentence occupies1emTo form a vertical text arrangement effect. Font size of charactersvminUnit, that is to automatically adjust the font size with the page size.

.words {
    display: flex;
    font-size: 15vmin;
    width: 5em;
}

.words p {
    line-height: 1em;
    margin: 0;
}

The effect is as follows:

Bold and shaded text:

.words {
    font-family: sans-serif;
    font-weight: bold;
}

.words p {
    text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);
}

The effect is as follows:

Set the page color tododgerblue, that is, sapphire blue. becausecolorAttribute will be inherited by child elements, so the color of the text will become sapphire blue and blend into the background. In fact, what we can see now is only the shadow of the text

body {
    color: dodgerblue;
    background-color: currentColor;
}

The effect is as follows:

3、 Animation effect

Create aappearOf which there is only 1 frame, that is, in the animation cycle50%Add shadow to the text. In fact, this line of code is from the.words pMoved over. The animation effect is a 6-second infinite loop Animation:

.words p {
    /*text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);*/
    animation: appear 6s ease-in-out infinite;
}

@keyframes appear {
    50% {
        text-shadow: 0.05em 0.05em 0.3em hsla(0, 0%, 0%, 0.4);
    }
}

The effect is as follows:

Next, let each sentence appear one by one. The implementation method is for each<p>Set a label--nVariable, and then set for the animationanimation-delayProperty, using expression for all<p>The label sets the delay time from 1 second to 5 seconds to make the animation appear sentence by sentence

.words p {
    animation-delay: calc(var(--n) * 1s);
}

.words p:nth-child(1) {--n: 1;}
.words p:nth-child(2) {--n: 2;}
.words p:nth-child(3) {--n: 3;}
.words p:nth-child(4) {--n: 4;}
.words p:nth-child(5) {--n: 5;}

The effect is as follows:

Next, define amoveKey frames ofpThe element moves from its original position slightly to the left and slightly to the right, making the animation more dynamic. Because there areappearandmove2 sets of keyframes, so you need to add oneanimation-nameAttribute, specifically used to define multiple sets of keyframes:

.words p {
    /*animation: appear 6s ease-in-out infinite;*/
    animation: 6s ease-in-out infinite;
    animation-name: appear, move;
}

@keyframes move {
    from {transform: translateX(-30%);}
    to {transform: translateX(30%);}
}

The effect is as follows:

be accomplished!

reference resources

  • Flex layout, CSS3 art, section 1.8.1
  • Shadows, CSS3 art, section 5.1.1
  • Animation, CSS3 art, Chapter 10

About my book CSS3 Art

Using more than 100 vivid and beautiful examples, my book “CSS3 art” systematically analyzes the important syntax of CSS and visual effects, and contains nearly 10 hours of video demonstration. Official account of the people’s post and telecommunications press was published in January 2020. Jingdong / Tmall / Dangdang is available for sale. https://mp.weixin.qq.com/s/6X42QkZ5N8JNji8aQ2FFcQ