css - 从左到右到右到左的反向宽度过渡

Question

我正在对 http://dreamelectronic.com/ 中的导航进行逆向工程(必须使用桌面才能正确查看)但以我自己的方式。

我几乎把它记下来了，准确无误，但我有一个小问题需要解决才能让它恰到好处。我有 2 个 div，它们彼此重叠，它们都增加了顶部边框的宽度，如网站所示。但是一个 div 从中心开始，从中心向右延伸，另一个从左向中心延伸(如果这有意义的话)。我需要第二个 div(div2 如果你去 CSDeck 阅读我的代码)从中心开始向左延伸。

我尝试的是使用 transform: rotateX(-180deg); 正如另一个问题的答案之一所建议的那样，我还尝试设置 test-align: right ; 上的div2 也有提示。我也尝试了 animation-direction: alternate; 但没有成功。

我在这里遇到过几个类似的情况，但到目前为止没有一个对我有用。

CSSDeck Project

如果我能记下最后的细节，非常感谢!

Answer 1

您可以在 div2 上设置以下属性:

div2 {
  float: right;
  margin-right: 50px;
  ...
}

片段:

ul {
    padding: 0;
    margin: 20px;
}
li {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100px;
}
div1 {
    margin-left: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    position: absolute;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
div2 {
    float: right;
    margin-right: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
men a {
    text-align: center;
    line-height: 3;
    color: #444;
    text-decoration: none;
    display: block;
    position: absolute;
    width: 100px;
    height: 50px;
    z-index: 1;
    transition: color .4s ease;
    margin-top: 4px;
}
men a:hover {
    color: #D50;
}
men a:hover~div1 {
    width: 50px;
    opacity: 1;
}
men a:hover~div2 {
    width: 50px;
    opacity: 1;
}

<ul>
  <li>
    <men>
      <a href="#">HOME</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">ABOUT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">PRODUCTS</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">CONTACT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
</ul>

所以你的 div1 是使用 margin-left 推送的(你已经有了)并且你的 div2 首先被迫 float 从 right 开始，然后使用 margin-right 推送。

希望这对您有所帮助。

附言不要忘记关闭 div2。