Question

如何在悬停时避免社交图标中的幻灯片转换？

我希望我的所有社交图标都在一个png文件中并使用转换，但它显示滑动它不像两个不同的图像转换

#social_icons {
  display:inline-block;
  background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
  background-position: 0px 0px;
  width: 150px;
  height: 175px;
  transition: 0.5s ease, forward;
  border: 1.5px solid blue;
  margin:10px;
}
#social_icons:hover {
  background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
  background-position: -150px 0px;
  width: 150px;
  height: 175px;
}
#social_icons2 {
  display:inline-block;
  background: url(http://www.florestrekkingtour.com/userfiles/images/FB_icons.png) no-repeat center center;
  width: 200px;
  height: 200px;
  transition: 0.5s ease, forward;
  border: 1.5px solid blue;
  margin:10px;
}
#social_icons2:hover {
  background: url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png) no-repeat center center;
  background-position: 0px 0px;
  background-size: 200px 200px;
  width: 200px;
  height: 200px;
}
h2 {
  background:rgba(0, 0, 0, 0.7);
  color:yellow;
  text-align:center;
  text-shadow:0px 0px 10px lime;
  margin-top:45%;
}

1 image
<div id="social_icons"><h2>Hover me</h2></div>
2 images
<div id="social_icons2"><h2>Hover me</h2></div>

Answer 1

对于具有单个元素的CSS3过渡，这是不可能的，您转换（更改）的属性是背景位置，因此它看起来滑动的原因，

如果您需要淡入/淡出效果，可以使用CSS3动画在悬停时淡出元素，将其移动到所需的背景位置，然后在新图像中淡入淡出。

如果您需要Cross-fade，则可以使用background-image：cross-fade（）

background-image: cross-fade(url("logo-box.png"), url("logo-bare.png"),   50%);

但它的浏览器支持非常有限，即http://caniuse.com/#feat=css-cross-fade。

或者最好的选择是使用2个元素并逐个淡出，你可以使用伪元素（IE8 +）伪造一个额外元素，即

#social_icons:before {
   content:"";
   display:inline-block;
   position:absolute;
   opacity:0;
   background:   url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-     facebook.png) no-repeat center center;
   background-position: 0px 0px;
   background-size: 200px 200px;
   width: 200px;
   height: 200px;  
}

请参阅http://jsfiddle.net/sjmcpherso/kr7ec28q/了解工作示例

css避免在悬停时过渡滑动

1 个答案: