PNG Sprite 悬停闪烁

Posted 2023-05-08

【中文标题】PNG Sprite 悬停闪烁

【英文标题】：PNG Sprite hover flicker

【发布时间】：2017-04-22 17:19:51

【问题描述】：

我正在尝试正确设置此图像的动画，以便在进出时悬停。 我已经完成了 90% 的路程。如果你快速进出鼠标，你可以看到精灵在背景中移动

是否有解决方法或更好的方法来做到这一点？

http://www.elevux.org/watermelon/

谢谢！！！

.wrapper 
	width:600px;
	height:600px;
	overflow:hidden;
	margin:20px;

	
.watermelon 
	width:600px;
	height:600px;
	background:url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
transition:background .5s steps(23, end);
display:block




.watermelon:hover 
	background-position:-13800px top;
	cursor:pointer
	

<div class="wrapper">
<div class="watermelon"></div>
</div>

【参考方案1】：

您应该将过渡移动到悬停选择器上，因为您希望动画发生。

https://jsfiddle.net/gzk3mcyr/

.wrapper 
  width: 600px;
  height: 600px;
  overflow: hidden;
  margin: 20px;


.watermelon 
  width: 600px;
  height: 600px;
  background: url(http://www.elevux.org/watermelon/watermelon-sprite.png) left top;
  display: block;


.watermelon:hover 
  background-position: -13800px top;
  cursor: pointer;
  transition: background .5s steps(23, end);

【讨论】：

嘿，看起来，这可行，但是它删除了很酷的部分动画！

好的，接下来对小提琴进行编辑怎么样？唯一的“缺点”是页面加载动画（可以使用 javascript 取消），但我认为它可以吸引与元素的交互。 jsfiddle.net/gzk3mcyr/1