我正在对背景图像使用CSS3变换来放大悬停。
我已经在最新的Opera、Safari和Firefox浏览器上测试过了,运行起来很流畅,但在Chrome上的过渡非常不稳定。
这里是链接,将鼠标悬停在社交图标上,以了解我的意思。http://www.media-flare.com/pins/ -我注意到,当你将浏览器调整到移动视图时,情况会变得更糟。
我在这里做了一个jsfiddle版本,并放慢了转换速度,因为它更难看到。
http://jsfiddle.net/wsgfz/1/ -这在chrome和火狐中看起来像肉干,在safari和opera中看起来很流畅。
我能做些什么让过渡更顺畅些吗?
如果您不能查看jsfiddle,下面是代码
.social {
position: relative;
list-style:none;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.fbook, .twit, .tmblr, .pntrst, .insta {
background: url(http://placehold.it/350x150) center center;
width: 78px;
height: 90px;
background-size: cover;
float: left;
margin: 30px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.fbook {background-position: 0 0}
.twit {background-position: -78px 0}
.tmblr {background-position: -156px 0}
.pntrst {background-position: -232px 0}
.insta {background-position: -310px 0}
.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
<ul class="social">
<li><a href="" class="fbook">Facebook</a></li>
<li><a href="" class="twit">Twitter</a></li>
<li><a href="" class="tmblr">Tumbler</a></li>
<li><a href="" class="pntrst">Pinterest</a></li>
<li><a href="" class="insta">Instagram</a></li>
<li><a href="" class="rss">RSS</a></li>
</ul>
发布于 2013-03-25 08:18:26
在Chrome中,转换似乎比转换更有效。试试这个:
.social {
position: relative;
list-style: none;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.fbook,
.twit,
.tmblr,
.pntrst,
.insta {
background: url(http://placehold.it/350x150) center center;
width: 78px;
height: 90px;
background-size: cover;
float: left;
margin: 30px;
-webkit-transform: translate(0px, 0);
-webkit-transition: -webkit-transform 0.8s ease;
-moz-transform: translate(0px, 0);
-moz-transition: -moz-transform 0.8s ease;
transform: translate(0px, 0);
transition: -webkit-transform 0.8s ease;
}
.fbook {
background-position: 0 0
}
.twit {
background-position: -78px 0
}
.tmblr {
background-position: -156px 0
}
.pntrst {
background-position: -232px 0
}
.insta {
background-position: -310px 0
}
.fbook:hover,
.twit:hover,
.tmblr:hover,
.pntrst:hover,
.insta:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
<ul class="social">
<li><a href="" class="fbook">Facebook</a>
</li>
<li><a href="" class="twit">Twitter</a>
</li>
<li><a href="" class="tmblr">Tumbler</a>
</li>
<li><a href="" class="pntrst">Pinterest</a>
</li>
<li><a href="" class="insta">Instagram</a>
</li>
<li><a href="" class="rss">RSS</a>
</li>
</ul>
一次鼠标快速输入/输出的闪烁效果现在也应该消失了。
https://stackoverflow.com/questions/15605731
复制相似问题