定时 3 小节 CSS 菜单

Question

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

目前，当你悬停时我有它。条形图完全填充橙色，当您将鼠标悬停在远处时，条形图从右到左填充白色！已经挠头好多次了！

我做了一个fiddleHERE

这是我的代码：

<section id="burger-box">
  <div id="cpBtn">
    <div></div>
    <div></div>
    <div></div>
  </div>  
</section>
<style>
#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
}
</style>

提前致谢 -菲利普

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

我已经修改了上面的 Fiddle 以包括使用 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 fiddle 是 HERE

定时 3 小节 CSS 菜单

Timed 3 Bars CSS Menu

css

css-transitions

hamburger-menu

编辑：