箱影悬停转换闪烁 [英] Box-shadow hover transition blinking

问题描述

我试图通过使黑色背景从左到右过来，让像img上的幻灯片动画一样进行箱形阴影工作。但是如果没有这个奇怪的闪烁问题，我无法做到。我已经找到了堆栈溢出的解决方案。

我也试过用一段而不是img，但结果是一样的。 b
$ b

这里是JSFiddle演示

HTML

 < section> 
< / section> 
  

CSS

  section {
 border：black 1px solid; 
 width：500px; 
 height：200px; 
过渡：1s缓出
} 
 
部分：悬停{
 box-shadow：inset 500px 0 0＃222; 
 float：left; 
过渡：1s缓解; 
 
  

解决方案

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

  div {position：relative; display：inline-block;} section {border：black 1px solid;宽度：500px; height：200px;过渡：1s缓解; box-sizing：border-box;} div：hover section {border-left-width：500px;向左飘浮;过渡：1s缓解;}节〜* {position：absolute;顶部：50％;剩下：50％; transform：translateX（-50％）translateY（-50％）; color：＃888;}  

< div class = PROG> <节>< /节> < p>以下是一些文字内容< / p>< / div>

b $ b

https://jsfiddle.net/k5kznmvL/

I'm trying to make box-shadow work like a slide animation over an img, by making the black background coming over from left to right. But I can't do it without this weird blinking problem. I've already looked for solutions around Stack Overflow.

I also tried it with a section instead of an img, but the result was the same.

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

解决方案

This appears to be a result of the way box-shadow is painted. Try another approach. Here's a flicker-free solution that thickens the left border instead of adding a 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/

这篇关于箱影悬停转换闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！