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

Posted 2023-05-08

【中文标题】使用CSS在导航栏上滑动（动画）bg图像位置

【英文标题】：Slide (animate) bg image position on navigation bar using CSS

【发布时间】：2012-10-25 07:10:31

【问题描述】：

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

所以我会有 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;

【问题讨论】：

我想这可能就是你要找的archive.plugins.jquery.com/project/lavalamp2

用纯CSS不行吗？

【参考方案1】：

这就是拉瓦兰效应；你可以在这里找到一个纯 CSS 解决方案：

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