使用 CSS 在导航栏上滑动（动画）背景图像位置

Question

我在这个论坛的其他地方找到了这段代码，想知道如何使用导航栏获得相同的效果。

所以我会有 7 个文本链接，当您将鼠标悬停在其中一个上时，图像应该滑动到该文本位。它需要位于每个页面上不同的开始位置（突出显示导航栏上的当前页面）

这是 html:

<div class="box">
<a href"#">Home</a>
</div>

和CSS：

.rollover a {
    background: url(img/bg_nav_slide.png) no-repeat 0px 0px;
    width: 920px;
    height: 50px;
    display: block;
}
.rollover a:hover {
    background-position: 0px 40px 0px 0px;
}   
.box {
    background: url(img/bg_nav_slide.png) no-repeat;;
    border: 0;
    width: 920px;
    height: 50px;    
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}
.box:hover {
    background-position: 40px 0;
}
.box p {
    text-indent: 2px;
}

Answer 1

这就是熔岩灯效应；你可以在这里找到纯 CSS 解决方案：

http://codepen.io/iamvdo/pen/GsIxk

Answer 2

积极： 您可以使用任意数量的菜单项，而无需更改代码，并将此代码用于项目中的许多此类元素

负面： 您有固定的项目宽度。

HTML：

<div id="nav_btn_container">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

CSS：

    #nav_btn_container > div {
    cursor: pointer;
    background: none;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease;
    height: 40px;
}

#nav_btn_container {
    color: #fff;
    font-size: 16px;
    background: #111;
    background-image: url("icons/btn.svg");
    background-repeat: no-repeat;
    background-position-x: 0;
    transition: all 0.25s ease;
    border-radius: 8px;
    display: inline-flex;
    margin: 10px 0;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 40px;
}

JS：

    $(NAV_BTN_CONTAINER).on("click", "div", function(event){
       let i = $(this).index();
       $(NAV_BTN_CONTAINER).css("background-position-x", i*120 + "px");
       onNavItemClick(i);
    });

图标/btn.svg：

    <?xml version="1.0" standalone="no"?>
<svg width="120" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="8" ry="8" width="120" height="40" style="fill:#191919;"/>
</svg>