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

Question

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

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

我尝试的是按照另一个问题的答案之一的建议使用 transform: rotateX(-180deg);，我还尝试在 div2 上设置 test-align: right; 也建议。我也试过 animation-direction: alternate; 但没有蛋糕。

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

CSSDeck Project

非常感谢我能记下最后的细节！

Answer 1

您可以使用定位 "right-to-left" div:

position: absolute;
right: 0;

http://jsfiddle.net/u5ofdp9m/1/

Answer 2

您可以在 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 首先被迫从 right 到 float 然后使用 margin-right.

推送

希望这对您有所帮助。

P.S。不要忘记关闭 div2.

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

Inverse width transition from left to right to right to left

css

width

css-transitions