欢迎加入站点基地设计开发交流群:30720409
详细内容
鼠标悬停图标滚动一下效果原理
发布日期:2017-01-23     点击:1481     字体:[ ]

经常见到网站上鼠标放在某个图标上,图标会向上或向左滑动一下,滑动后还是这个图标,其实就是把两个图标做在一个图上,鼠标悬停时变动下背景图片位置,当然要设置元素的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;
 }

用户评论
昵称:匿名 来自:60.27.94.*  
2017-4-14 10:06:10
的高峰时段
昵称 
内容  *
验证码   
   
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计