经常见到网站上鼠标放在某个图标上,图标会向上或向左滑动一下,滑动后还是这个图标,其实就是把两个图标做在一个图上,鼠标悬停时变动下背景图片位置,当然要设置元素的transition,看下面代码:
注意两个样式定义,一个是.fo-tool .wxs .ico,这个定义原始位置,一个是.fo-tool .wxs .weixin:hover .ico,定义鼠标悬停时背景图位置,当然还有改变背景色的.fo-tool .wxs a:hover
<div class="fo-tool">
<div class="wxs clearfix">
<a href="Uploadfiles/Picture/2016-2-22/20162221123355240.jpg" class="weixin"><span class="ico"></span></a>
<a href="#" class="sina"><span class="ico"></span></a>
</div>
<p>? Copyright 2015 All Right Reserved </p>
</div>
.fo-tool .wxs{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
margin-bottom:17px;
}
.fo-tool .wxs a{
width:40px;
height:30px;
float:left;
background:#eeeeee;
}
.fo-tool .wxs .ico{
width:100%;
height:100%;
display:block;
background:url(../images/ftool.png) no-repeat left top;
transition:300ms;
-webkit-transition: 3000ms;
}
.fo-tool .wxs .sina .ico{
background-position:right top;
}
.fo-tool .wxs a:hover{
background:#b42b2b;
}
.fo-tool .wxs .weixin:hover .ico{
background-position:left bottom;
}
.fo-tool .wxs .sina:hover .ico{
background-position:right bottom;
}