Question

http://fiddle.jshell.net/at8eybrn/

如何将转换设置为从左到右，在上面的链接中......

stuff(<4DigitTime>, 3, 0, ':')

Answer 1

这是一个解决方案。它使用生成的内容来提供元素悬停时从左向右移动的“颜色面板”。

我更改的HTML在<span>内包含额外的<a>。这是为了允许设置文本的z-index，因此它出现在颜色面板上。 HTML现在看起来像这样：

<nav>
    <ul>
      <li><a href="#"><span>Home</span></a></li>
      <li><a href="#"><span>About</span></a></li>
      <li><a href="#"><span>Contact</span></a></li>
      <li><a href="#"><span>More</span></a></li>
    </ul>
</nav>

重要的CSS是：

li {
  position: relative;
}

li a {
  transition: color .6s ease;
  display: block;
  position: relative;
  z-index: 1;
}

li a::before {
  content: '';
  display: block;
  transition: width .6s ease;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  z-index: 0;
}

li a:hover {
  color: #fff;
}

li a:hover:before {
  width: 100%;
}

li:nth-child(1) a::before{ background: #3498db; }
li:nth-child(2) a::before{ background: #FF7832; }
li:nth-child(3) a::before{ background: #16C4A7; }
li:nth-child(4) a::before{ background: #FF7D9D; }

li a span{
  position: relative;
  z-index: 1;
}

我们正在做的是使用:before内容绘制一个10px宽的框，顶部，左侧和底部对齐，包含<a>。这是绝对定位的，所以它不会影响其他元素的布局，我们可以独立转换它。

当<a>悬停时，我们使用此选择器将:before伪元素的宽度设置为100％：li a:hover:before。过渡使其从左到右平稳运动。

<span>内的<a>相对位置较高，z-index较高，以确保它出现在颜色面板的顶部。颜色有一个过渡，也可以产生更好的变化效果。

其他几个样式点 - 为了保持一致性，我将颜色选择器切换为使用nth-child(1)和nth-child(4)。这样，如果你需要第五个，你可以继续添加选择器。

CSS3从左到右过渡

1 个答案: