Question

当用户将鼠标悬停在我的按钮上时，会有一种颜色从左到右。当我将它悬停时，它没有平滑过渡，而是闪烁了一点。

我该如何解决？

＆＃13;

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

＆＃13;

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

＆＃13;

View on JSFiddle

Answer 1

只需在初始框阴影值中添加一个非常小的展开半径即可。在这种情况下box-shadow: inset 0 0 0 0.01px #D80286;。

＆＃13;

.slide_right:hover {
  box-shadow: inset 400px 0 0 0 #D80286;
}

.button_slide {
  color: #FFF;
  border: 2px solid rgb(216, 2, 134);
  border-radius: 0px;
  padding: 18px 36px;
  display: inline-block;
  font-family: "Lucida Console", Monaco, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;   
  box-shadow: inset 0 0 0 0.01px #D80286;
  -webkit-transition: ease-out 0.4s;
  -moz-transition: ease-out 0.4s;
  transition: ease-out 0.4s;
}

＆＃13;

<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">
<input type="button" class="button_slide slide_right" value="BUTTON: SLIDE INSIDE">

＆＃13;

CSS过渡是闪烁的

1 个答案: