Question

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

目前虽然我有它，当你盘旋。酒吧完全用橙色填充，当你徘徊时，酒吧从右到左填充白色！已经刮过我很多次了！

我做了一个小提琴HERE

这是我的代码：

request.getRequestDispatcher("/index.html").forward(request, response);

先谢谢了 -Phillip

Answer 1

你在尝试这样的事吗？

https://jsfiddle.net/0g3n1bkh/

如果是这样，则问题是\t不可动画。

＆＃13;

background-gradients

＆＃13;

#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
}

＆＃13;

编辑：

当然，只需将以下内容添加到CSS中：

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

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小提琴是HERE

定时3条CSS菜单

2 个答案:

编辑：