鼠标悬停时，简单的HTML5/CSS3背景图像过渡效果

Question

鼠标悬停时，简单的HTML5/CSS3背景图像过渡效果

4

我试图理解仅仅使用HTML5和CSS3实现最简单的背景过渡效果。通过搜索stackoverflow，我了解到可以很容易地使用外部库（如jQuery）来实现，但为了这个项目，我决定不依赖任何外部库。

标记

<nav> 
  <ul> 
    <li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
  </ul> 
</nav>

样式

body {
  background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
   background: url('background-hover.png'), no-repeat;
  -webkit-transition: // TODO;
  -moz-transition: // TODO;
  -o-transition: // TODO;
  -ms-transition: // TODO;
  transition: // TODO;
}

- Nano Taboada

1

使用CSS Sprite代替，并在悬停时更改背景位置值以实现过渡效果。 - salmatron

@SalmanPK：非常感谢您的评论！我考虑过_CSS Sprites_，但这不会在图像之间进行任何__转换__（淡入/淡出），对吧？无论如何，您介意提供一些关于您建议的方法的代码示例吗？ - Nano Taboada

你只能在背景图像上进行位置和其他数字属性的更改，无法使它们淡入淡出。 - robertc

@robertc：感谢您的贡献。您介意将此评论发布为答案，以便我最终接受它吗？ - Nano Taboada

2个回答

2

这是我用来实现此效果的代码示例。这些图片是包含常规和悬停状态的精灵图。诀窍是将img添加到li和a中，并使用不透明度来改变图像的外观。然后，您可以使用css3过渡效果使其看起来更加流畅。

<ul id="homenav">
    <li class="h"><a href="#><span>Home</span></a></li>
    <li class="i"><a href="#"><span>Inloggen</span></a></li>
    <li class="v"><a href="#"><span>Voorbeelden</span></a></li>
</ul>

#homenav li.h, #homenav li.h a        {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a        {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a        {background-image: url('img/btn_voorbeelden.jpg');}

#homenav li     {background-position: 0 170px;}
#homenav li a   {background-position: 0 0;}
#homenav li a:hover
        {opacity: 0;
        -webkit-transition: opacity .8s ease-in;
        -moz-transition: opacity .8s ease-in;
        -o-transition: opacity .8s ease-in;
        transition: opacity .8s ease-in;}

#homenav a      {display: block; height: 100%;}
#homenav a span {display: none;}

- Mirthe

谢谢你的回复，Mirthe - 你介意重构你的代码，使其与问题中提供的代码片段兼容吗？ - Nano Taboada

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- robertc · Accepted Answer

正如我在评论中提到的，你不能过渡background-image属性，但如果你愿意添加额外的标记并过渡不透明度，你可以获得你想要的效果。所以你将有类似这样的标记：

<nav>
  <ul>
    <li>
      <img src="no-icon.png">
      <img src="yes-icon.png">
      <a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
    </li>
  </ul>
</nav>

然后在图片上设置过渡效果，将它们绝对定位（就像背景一样），并默认隐藏其中一个（为了清晰起见，我省略了供应商扩展）：

nav li img {
    position: absolute;
    transition-duration: 1.5s;
    opacity: 1;
}
nav li img:first-child {
    opacity: 0;
}

然后在 li:hover 上交换不透明度的值：

nav li:hover img {
    opacity: 0;
}
nav li:hover img:first-child {
    opacity: 1;
}

这是一个完整的工作示例。虽然需要添加额外的标记，但它可以工作。这里是完整的工作示例。