Question

我创建了一个简单的汉堡包菜单，当用户将鼠标悬停在其上时会转换为加号，但是在悬停时会发生恼人的闪烁。是否有可能在CSS3中增加整个汉堡包周围的悬停区域，以免闪烁发生？

Answer 1

您可能知道闪烁是由于元素开始和停止被徘徊。有几种方法可以解决这个问题，我选择的方法是将其作为一个元素而不是两个（：

<span class="menu">MENU</span>

body {
  background:#EDDE45;
  position:relative;
  margin-left:50%;
  top:50px;
}
.menu {
  position:relative;
  top:50px;
  padding-top:3em;
  font-family: arial,verdana;
  font-size:18px;
  color:black;
  cursor:default;
}
.menu:before { /* The top two lines */
  content:'';
  position: absolute;
  left: -1em;
  top: 0;
  width: 5em;
  height: .5em;
  border-top:0.5em solid black;
  border-bottom:0.5em solid black;
  transition:transform 0.25s ease-in, border-bottom .2s;
}
.menu:after { /* The third line */
  content:'';
  position: absolute;
  left:-1em;
  top:2em;
  width:5em;
  height:0.5em;
  background:black;
  transition:all 0.25s ease-in;
}
.menu:hover {
  cursor:pointer;
}
.menu:hover:before {
  transform:scale(0.8);
  border-bottom:0.5em solid rgba(255,255,255,0);
}
.menu:hover:after {
  transform:scale(0.8) rotate(90deg);
  top:0em;
}

Demo

如果您有任何疑问，请与我联系！

CSS3菜单动画闪烁

1 个答案: