盒子阴影悬停过渡闪烁

Posted 2021-04-14

我试图通过使黑色背景从左到右来实现，使盒子阴影像幻灯片上的幻灯片一样工作。但如果没有这个奇怪的眨眼问题，我无法做到。我已经在Stack Overflow上寻找解决方案了。

我也尝试了一个部分而不是img，但结果是一样的。

Here's the JSFiddle demo

html

<section>
</section>

CSS

section {
  border:black 1px solid;
  width:500px;
  height:200px;
  transition:1s ease-out
}

section:hover{
  box-shadow:inset 500px 0 0 #222;
  float:left;
  transition:1s ease-out;
}

答案

这似乎是box-shadow绘制方式的结果。尝试另一种方法。这是一个无闪烁的解决方案，加厚左边框而不是添加框阴影：

div {
  position: relative;
  display: inline-block;
}
section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  transition: 1s ease-out;
  box-sizing: border-box;
}

div:hover section {
  border-left-width: 500px;
  float: left;
  transition: 1s ease-out;
}

section~* {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #888;
}

<div class="prog">
  <section></section>
  <p>Here's some text content.</p>
</div>

另一答案

使用简单伪元素并通过更改其右属性将过渡应用于宽度的另一种解决方案：

section {
  border: black 1px solid;
  width: 500px;
  height: 200px;
  position:relative;
  color:#c2c2c2;
  text-align:center;
  padding-top:50px;
  box-sizing:border-box;
}

section:before {
  position: absolute;
  content: " ";
  top: 0;
  bottom: 0;
  left: 0;
  background: #000;
  right: 100%;
  transition:1s ease-out;
  z-index:-1;
}
section:hover::before {
  right:0;
}

<section>
  add your text here
</section>

另一答案

您还可以简单地将某种框阴影模拟添加到初始状态，该状态具有非常小的扩散半径。

  section {
      box-shadow: inset 0 0 0 0.01px white;
  }

以上是关于盒子阴影悬停过渡闪烁的主要内容，如果未能解决你的问题，请参考以下文章

如何修复框阴影过渡不适用于悬停？

css3背景过渡在第一个时闪烁：悬停

html 定价面板，带有过渡造型的精妙盒子阴影

Firefox 变换比例图像错误。使用悬停变换过渡时，图像会闪烁自身的一个小版本

css 盒子阴影片段

为啥过渡框阴影会导致整页重绘？