Question

如何在这种社交悬停效果中取得更好的效果。任何的想法？

JSFIDDLE

例如：http://themes.semicolonweb.com/html/canvas/demo-travel.php

Answer 1

为了在宽度/高度上使用css过渡，你必须在像素中使用静态值作为例子（不是auto）。

以下是它的样子：

.social li a {
    width: 30px;
    line-height: 50px;
    height: 40px;
    float: left;
    overflow: hidden;
    text-decoration: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    background:transparent;
    transition: width .5s, background .5s;
    padding:5px;
}
.social li.rss a {
    color: #F88F16;
}
.social li.facebook a {
    color: #3B5998;
}
.social li.twitter a {
    color: #3CF;
}
.social li.googleplus a {
    color: #BD3518;
}
.social li.facebook:hover a {
    width: 115px;
    background:#999;
}
.social li.twitter:hover a {
    width: 80px;
    background:#999;
}
.social li.googleplus:hover a {
    width: 105px;
    background:#999;
}

Live demo

P.S。：我清理了你的CSS;）

图标悬停文本效果

1 个答案: