盒子阴影悬停过渡闪烁

Posted 2023-03-06

【中文标题】盒子阴影悬停过渡闪烁

【英文标题】：Box-shadow hover transition blinking

【发布时间】：2018-04-20 10:52:30

【问题描述】：

我正在尝试通过使黑色背景从左到右来使 box-shadow 像 img 上的幻灯片动画一样工作。但是如果没有这个奇怪的闪烁问题，我就无法做到。我已经在 Stack Overflow 上寻找解决方案。

我也试过用section代替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;

【参考方案1】：

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

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>

【参考方案2】：

这似乎是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>

https://jsfiddle.net/k5kznmvL/

【参考方案3】：

您也可以简单地在初始状态中添加某种盒子阴影模拟，其传播半径非常小。

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