定时3栏CSS菜单

Question

我正在尝试制作一个汉堡菜单，其中三个条在悬停的左右填充橙色！

目前我有悬停时，杠铃充满了橙色，当您徘徊时，杠铃从右侧向左填充白色！

这是我的代码：

#burger-box     {
  float:right;
  width:80px;  
  height:70px;
  top:0;
  right:0;
  background:rgba(34,34,34,1);
  position:fixed;
  z-index:101}
#burger-box > #cpBtn {
  width:40%;
  height:25px;
  cursor:pointer;
  padding:25px 30% 20px 30%
}
#burger-box > #cpBtn > div {
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  background:linear-gradient(to left, #fff 50%, #E18767 50%);
  background-size:200% 100%;
  background-position:right bottom;
  margin:6px 0;
  transition:background 1.75s ease
}
#burger-box > #cpBtn > div:hover {
  background:#E18767
 }
#burger-box > #cpBtn:hover > div {
  background:#E18767;
  background-position:left bottom
}

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>  
</section>

Answer 1

您是否尝试过这样的事情？

https://jsfiddle.net/0g3n1bkh/

如果是这种情况，那么问题是background-gradients不是动画。

#burger-box {
  float: right;
  width: 80px;
  height: 70px;
  top: 0;
  right: 0;
  background: rgba(34, 34, 34, 1);
  position: fixed;
  z-index: 101
}
#burger-box > #cpBtn {
  width: 40%;
  height: 25px;
  cursor: pointer;
  padding: 25px 30% 20px 30%
}
#burger-box > #cpBtn > div {
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  background: linear-gradient(to left, #fff 50%, #E18767 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  margin: 6px 0;
  transition: background 1.75s ease
}
#burger-box > #cpBtn:hover > div {
  background-position: left bottom
}

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>
</section>

只需将以下内容添加到您的CSS：

#burger-box > #cpBtn > div {
  transition-delay: 0.5s;
}
#burger-box > #cpBtn > div:first-child {
  transition-delay: 0s;
}
#burger-box > #cpBtn > div:last-child {
  transition-delay: 1s;
}

Answer 2

我已经修改了上面的小提琴，以使用nth-child（）包含三个条的定时功能这是我的代码：

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>  
</section>
#burger-box {
  float: right;
  width: 80px;
  height: 70px;
  top: 0;
  right: 0;
  background: rgba(34, 34, 34, 1);
  position: fixed;
  z-index: 101
}
#burger-box > #cpBtn {
  width: 40%;
  height: 25px;
  cursor: pointer;
  padding: 25px 30% 20px 30%
}
#burger-box > #cpBtn > div {
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  background: linear-gradient(to left, #fff 50%, #E18767 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  margin: 6px 0;
  transition: background .25s ease .45s
}
#burger-box > #cpBtn > div:nth-child(1) {
  transition: background .25s ease .25s
}
#burger-box > #cpBtn > div:nth-child(3) {
  transition: background .25s ease .65s
}
#burger-box > #cpBtn:hover > div {
  background-position: left bottom
}

和JS小提琴在这里