使用 nav dt 淡入动画精灵

Question

我想在我制作的导航菜单中为精灵按钮创建淡入效果。我希望淡入时间与网站底部的图标相匹配，但我似乎无法将同样的东西应用到我的导航中。它会立即改变。即使我成功了，精灵也只会做一个幻灯片效果，这不是我想要的。我只想在 CSS 内完成。你能帮帮我吗？

这是我的网站：www.thestripedphoenix.com

#navigation {
  position: relevant;
  margin-top: 10px;
  margin-left: 800px;
  max-width: 600px;
  min-width: 520px;
  height: 50px;
  float: right;
  overflow: hidden;
}
#nav {
  position: relevant;
  right: 0.5em;
  height: 49px;
  line-height: 3em;
  border: 3px solid #232323;
}
#nav dl {
  margin: 0;
  padding: 0;
}
#nav dt {
  float: left;
}
#nav dt a {
  display: block;
  height: 0px !important;
  padding: 100px 0 0 0;
  overflow: hidden;
  background-repeat: no-repeat;
}
#nav dt a:hover {
  background: 0 -50px;
}
#nav dt a:active {
  background-position: 0 -50px;
}
#nav dt a:visited {
  background-position: 0 -50px;
}
#nav dt#start, #nav dt#start a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/intro.gif");
}
#nav dt#about, #nav dt#about a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/about.gif");
}
#nav dt#skills, #nav dt#skills a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/skills.gif");
}
#nav dt#portfolio, #nav dt#portfolio a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/portfolio.gif");
}
#nav dt#message, #nav dt#message a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/contact.gif");
}

<div id="navigation">
  <nav id="nav">
    <dl>
      <dt id="start"><a href="#intro">intro</a><span></span></dt>
      <dt id="about"><a href="#one">about</a></dt>
      <dt id="skills"><a href="#two">skills</a></dt>
      <dt id="portfolio"><a href="#work">portfolio</a></dt>
      <dt id="message"><a href="#contact">contact</a></dt>
    </dl>
  </nav>
</div>

Answer 1

您已经为 #nav dt 和 #nav dt a 分配了相同的背景图片，您现在要做的就是将 a 的 opacity 设置为 0 和 return 悬停时将其设置为 1。为动画添加 transition。页面底部的图标设置为 0.2 秒动画。我将菜单按钮设置为 0.25s

#navigation {
  position: relevant;
  margin-top: 10px;
  margin-left: 800px;
  max-width: 600px;
  min-width: 520px;
  height: 50px;
  float: right;
  overflow: hidden;
  background-color: #232323;
}
#nav {
  position: relevant;
  right: 0.5em;
  height: 49px;
  line-height: 3em;
  border: 3px solid #232323;
}
#nav dl {
  margin: 0;
  padding: 0;
}
#nav dt {
  float: left;
}
#nav dt a {
  display: block;
  height: 0px !important;
  padding: 100px 0 0 0;
  overflow: hidden;
  background-repeat: no-repeat;
  transition: all 0.25s;
}
#nav dt a:active {
  background-position: 0 -50px;
}
#nav dt a:visited {
  background-position: 0 -50px;
}
#nav dt#start, #nav dt#start a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/intro.gif");
}
#nav dt#about, #nav dt#about a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/about.gif");
}
#nav dt#skills, #nav dt#skills a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/skills.gif");
}
#nav dt#portfolio, #nav dt#portfolio a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/portfolio.gif");
}
#nav dt#message, #nav dt#message a {
  width: 100px;
  background-image: url("http://www.thestripedphoenix.com/images/contact.gif");
}
#nav dt a {
  background: 0 -50px;
  opacity: 0;
}
#nav dt a:hover {
  opacity: 1;
}

<div id="navigation">
  <nav id="nav">
    <dl>
      <dt id="start"><a href="#intro">intro</a></dt>
      <dt id="about"><a href="#one">about</a></dt>
      <dt id="skills"><a href="#two">skills</a></dt>
      <dt id="portfolio"><a href="#work">portfolio</a></dt>
      <dt id="message"><a href="#contact">contact</a></dt>
    </dl>
  </nav>
</div>

使用 nav dt 淡入动画精灵

Fade in animation sprite using nav dt

css

navigation

sprite-sheet

fadein