Front-end daily combat: # 37 video demonstrates how to grasp the good timing of the transition and animation, special effects creation Stroke button

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

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

Interactive video tutorials

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

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

Source code download

Daily front-end combat series full source code can be downloaded from github:

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

Code Reading

Define dom, the standard navigation mode:

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

Centered:

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

Custom text and button border style:

nav ul {
    padding: 0;
}

nav ul li {
    color: white;
    list-style-type: none;
    font-size: 32px;
    font-family: sans-serif;
    text-transform: uppercase;
    width: 12em;
    height: 4em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    line-height: 4em;
    letter-spacing: 0.2em;
}

Before using dummy elements define border and right border, border color which is used multiple times because, so the use of variables:

:root {
    --color: dodgerblue;
}

nav ul li::before {
    content: '';
    position: absolute;;
    width: 0;
    height: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    border-top: 1px solid var(--color);
    border-right: 1px solid var(--color);
}

Similarly, using the definition of the right border and bottom border after pseudo-element:

nav ul li::after {
    content: '';
    position: absolute;;
    width: 0;
    height: 0;
    visibility: hidden;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--color);
    border-left: 1px solid var(--color);
}

Admission design frame animation, press, right, down, left the order of the display frame, in order to facilitate the adjustment of speed of the animation set time-related variables:

:root {
    --time-slot-length: 0.1s;
    --t1x: var(--time-slot-length);
    --t2x: calc(var(--time-slot-length) * 2);
    --t3x: calc(var(--time-slot-length) * 3);
    --t4x: calc(var(--time-slot-length) * 4);
}

nav ul li:hover::before,
nav ul li:hover::after {
    width: 100%;
    height: 100%;
    visibility: visible;
}

nav ul li:hover::before {
    transition:
        visibility 0s,
        width linear var(--t1x),
        height linear var(--t1x) var(--t1x);
}

nav ul li:hover::after {
    transition: 
        visibility 0s var(--t2x),
        width linear var(--t1x) var(--t2x),
        height linear var(--t1x) var(--t3x);
}

Design border appearance of animation, reverse the order of admission:

nav ul li::before {
    transition:
        height linear var(--t1x) var(--t2x),
        width linear var(--t1x) var(--t3x),
        visibility 0s var(--t4x);
}

nav ul li::after {
    transition:
        height linear var(--t1x),
        width linear var(--t1x) var(--t1x),
        visibility 0s var(--t2x);
}

Let the button text change color during stroke:

nav ul li {
    transition: var(--t4x);
}

nav ul li:hover {
    color: var(--color);
}

Finally, at the end of the stroke, at around the button to add a pulse animation to enhance dynamic:

nav ul li:hover {
    animation: pulse ease-out 1s var(--t4x);
}

@keyframes pulse {
    from {
        box-shadow: 0 0 rgba(30, 144, 255, 0.4);
    }

    to {
        box-shadow: 0 0 0 1em rgba(30, 144, 255, 0);
    }
}

We're done!