37.如何把握好 transition 和 animation 的时序，创作描边按钮特效

Posted 2020-08-18

原文地址：https://segmentfault.com/a/1190000015089396

拓展地址：https://scrimba.com/c/cWqNNnC2

html code:

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

CSS code:

/* 子元素垂直、水平居中 */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
: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);
    --color: dodgerblue;
}
nav ul {
    padding: 0;
}
nav ul li {
    color: white;
    list-style-type: none;
    font-family: sans-serif;
    text-transform: uppercase;
    width: 8em;
    height: 3em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.1em;
    text-align: center;
    line-height: 3em;
    letter-spacing: 0.1em;
    position: relative;
    transition: var(--t4x); /* duration 4x */
    margin: 1em;
}

nav ul li:hover {
    color: var(--color);
    /* 在描边结束后，在按钮四周增加一个脉冲动画，加强动感 */
    animation: pulse ease-out 1s var(--t4x); /* delay 4x */
}
/* 用 before 伪元素定义上边框和右边框，其中边框颜色因会多次被用到，所以采用变量：
   类似地，用 after 伪元素定义右边框和下边框 */
nav ul li::before,
nav ul li::after {
    content: ‘‘;
    position: absolute;;
    width: 0;
    height: 0;
    border-radius: 0.1em;
    visibility: hidden;
}

nav ul li::before {
    top: 0;
    left: 0;
    border-top: 1px solid var(--color);
    border-right: 1px solid var(--color);
    transition:
    /* 属性 速度曲线 所花时间 开始时间 */
        height linear var(--t1x) var(--t2x), /* delay 2x */
        width linear var(--t1x) var(--t3x), /* delay 3x */
        visibility 0s var(--t4x); /* delay 4x */
}

nav ul li::after {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid var(--color);
    border-left: 1px solid var(--color);
    transition:
        height linear var(--t1x),
        width linear var(--t1x) var(--t1x), /* delay 1x */
        visibility 0s var(--t2x);  /* delay 2x */
}

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); /* delay 1x */
}

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

@keyframes pulse {
    from {
        /* rgb(30, 144, 255) = dodgerblue */
        box-shadow: 0 0 rgba(30, 144, 255, 0.5);
    }

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