我使用 CSS3 过渡根据鼠标悬停时的边距值对某些链接进行动画处理。它的动画效果符合预期,但 Chrome 中的动画并不像其他浏览器(如 Firefox、IE10)那样流畅。
在 Chrome 中,当我将鼠标悬停在链接上时,所有其他链接都会稍微移动。请检查下面的链接。
CSS
.social {
list-style: none;
float: right;
text-align: right;
position: relative;
top: 15px;
}
.social li {
padding: 2px 0;
}
.social li a {
font-size: 18px;
color: #a6a7a6;
margin-right: 5px;
-webkit-transition: margin 400ms;
-moz-transition: margin 0.2s ease;
-o-transition: margin 0.2s ease;
-ms-transition: margin 0.2s ease;
transition: margin 0.2s ease;
}
.social li a:hover {
color: #1b1b1b;
margin-right: 23px;
}
.social .ico {
background-color: #1b1b1b;
background-position: center center;
background-repeat: no-repeat;
width: 20px;
height: 20px;
position: absolute;
margin-left: 6px;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 400ms;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.social li a:hover .ico {
opacity: 1;
filter: alpha(opacity=100);
}
HTML
<ul class="social">
<li><a href="#">FACEBOOK<span class="ico"></span></a></li>
<li><a href="#">TWITTER<span class="ico"></span></a></a></li>
<li><a href="#">LINKEDIN<span class="ico"></span></a></a></li>
<li><a href="#">YOUTUBE<span class="ico"></span></a></a></li>
</ul>
http://jsfiddle.net/G9M8L/1/ http://jsfiddle.net/G9M8L/1/
ul Social 正在改变其宽度,以适应增加边距的子项的新宽度。因此,孩子们会向左移动,但随后孩子们的边距会被重新计算,并且他们会回到正确的位置。
只需将此宽度固定即可:
.social {
list-style: none;
float: right;
text-align: right;
position: relative;
top: 15px;
width: 121px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)