Front-end 167

Time:2019-8-14

Front-end 167

Effect Preview

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

https://codepen.io/comehope/pen/KLvENb

Interactive Video

This video is interactive, you can pause the video at any time, edit the code in the video.

Please open it with chrome, safari, edge.

https://scrimba.com/p/pEgDAM/cJ8vrMt2

Source code download

The full source code of the daily front-end combat series is downloaded from github:

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

Code Interpretation

Drawing a dot

Define the DOM structure with only one DOM element named.heart

<figure class="heart"></figure>

Set the page background color to light pink gradient by centering the elements.

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(lightpink, white);
}

Draw a red dot:

.heart {
    font-size: 30px;
    width: 1em;
    height: 1em;
    background-color: red;
    border-radius: 50%;

2. Making a Lattice Graph and Its Projection

We’re going to make a dot matrix, which was used in Op. 67. The principle is to take advantage of the box-shadow feature. If you already know this technique, you can scroll directly to the next section. If you don’t know it, do the following small experiments to understand.

to.heartSet the shadow below, and a large black spot will appear on the right side of the red dot.

.heart {
    box-shadow:
        1.1em 0;
}

Continue to draw a black dot on the left side of the red dot:

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0;
}

Continue and draw a black dot below the red dot.

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0,
        0 1.1em;
}

Draw a black dot above the red dot:

.heart {
    box-shadow:
        1.1em 0,
        -1.1em 0,
        0 1.1em,
        0 -1.1em;
}

Now you can see that four black dots form a cross, and the red dot is at the cross. This technique is to treat the screen as a plane coordinate system with a red dot as its origin, with the right side of the horizontal direction being positive, and the bottom of the vertical direction being positive, consistent with the coordinate system of the browser. Each shadow attribute value can draw a dot becausebox-shadowMultiple attributes can be accepted, so we can draw dot matrix with multiple dots.

In order to make the code more intuitive, we can arrange the layout of the code as the shape of the pattern.box-shadowFour attribute values are used to draw a cross:

.heart {
    box-shadow: 
                    0 -1.1em,




        -1.1em 0,               1.1em 0,




                    0 1.1em;
}

Because it does not specify a color for the shadow, it defaults to black. It is not necessary to change it to red.box-shadowAssignment, based on the inheritance principle of CSS, assigns a color directly to the element, and the shadow uses the same color.

.heart {
    color: red;
    background-color: currentColor;
}

Red is too bright, let its color talk a little:

.heart {
    color: hsla(0, 100%, 50%, 0.6);
}

Next, use another technique.drop-shadow()Make a copy of the whole pattern:

.heart {
    filter: drop-shadow(3.3em 2.2em dodgerblue);
}

3. Drawing Heart Patterns

With the above knowledge reserve, drawing heart shape is just a work of life, spend a little time drawing on paper, count, you can create dot matrix graphics. The heart shape used here is 9 * 8 matrix:

.heart {
    --heart-shape: 
                    -3.3em -3.3em, -2.2em -3.3em,                                          2.2em -3.3em, 3.3em -3.3em,




    -4.4em -2.2em, -3.3em -2.2em, -2.2em -2.2em, -1.1em -2.2em,             1.1em -2.2em, 2.2em -2.2em, 3.3em -2.2em, 4.4em -2.2em,




    -4.4em -1.1em, -3.3em -1.1em, -2.2em -1.1em, -1.1em -1.1em, 0em -1.1em, 1.1em -1.1em, 2.2em -1.1em, 3.3em -1.1em, 4.4em -1.1em,



    
    -4.4em 0em,    -3.3em 0em,    -2.2em 0em,    -1.1em 0em,    0em 0em,    1.1em 0em,    2.2em 0em,    3.3em 0em,    4.4em 0em,



    
                    -3.3em 1.1em,  -2.2em 1.1em,  -1.1em 1.1em,  0em 1.1em,  1.1em 1.1em,  2.2em 1.1em,  3.3em 1.1em,




                                    -2.2em 2.2em,  -1.1em 2.2em,  0em 2.2em,  1.1em 2.2em,  2.2em 2.2em,




                                                    -1.1em 3.3em,  0em 3.3em,  1.1em 3.3em,




                                                                0em 4.4em;
    box-shadow: var(--heart-shape);
}

Haha, this large piece of code is really dizzying, but if you look at it in the editor, it’s a heart shape. Like the following, this is what you see and what you get in the legend.

Front-end 167

So far, we have got a red heart and a blue heart.

IV. Designing Animation Effects

Define two sets of key frames for red and blue hearts. The frame effect of red hearts isbox-shadowThe frame effect of Blue Heart isdrop-shadow()Code:

.heart {
    /* box-shadow: var(--heart-shape); */
    /* color: hsla(0, 100%, 50%, 0.6); */
    /* filter: drop-shadow(3.3em 2.2em dodgerblue); */
}

@keyframes heart-one {
    to {
        box-shadow: var(--heart-shape);
        color: hsla(0, 100%, 50%, 0.6);
    }
}

@keyframes heart-two {
    to {
        filter: drop-shadow(3.3em 2.2em dodgerblue);
    }
}

Finally, define animation attributes and note that Blue Heart has0.3sDelay:

.heart {
    animation: 
        heart-one 1s infinite alternate cubic-bezier(0.5, 1.7, 0.5, 1.5),
        heart-two 1s 0.3s infinite alternate cubic-bezier(0.5, 1.7, 0.25, 1);
}

Be accomplished!