html 滚动的CSS动画。通过这种对翻转的简单效果，使您的菜单更有趣。

Posted 2021-05-11

a {
    text-decoration: none;
    font-weight: 600;
    display: block;
    font-size: 1.2em;
    transition: top .3s cubic-bezier(.20,.85,.45,1)
}

#menu a {
    position: relative;
    top: 0
}

#menu a .label {
    color: #999;
    line-height: 35px
}

#menu a .label::after {
    content: attr(data-label); /* Value from 'data-label' attribute */
    display: block;
    color: #25589a
}

#menu ul {
    height: 40px;
    overflow: hidden;
    background: #eee
}

#menu li {
    margin: 0 12px;
    float: left;
    list-style: none
}

#menu a:hover {
    top: -35px
}

<nav id="menu">
    <ul>
        <li>
            <a href="/">
                <span data-label="Home" class="label">Home</span>
            </a>
        </li>
        <li>
            <a href="/info">
                <span data-label="Info" class="label">Info</span>
            </a>
        </li>
        <li>
            <a href="/contact">
                <span data-label="Us" class="label">Contact</span>
            </a>
        </li>
    </ul>
</nav>

<!-- 
The value in data-label will be used in the CSS to create a pseudo-element with ::after. 
-->