如何在悬停/焦点上“反弹”社交导航图标?

时间:2013-04-10 12:02:23

标签: css css3

友好的堆叠,

任何人都知道如何在以下位置生成以下CSS悬停效果:

http://seanwes.com/

还有一些关于堆栈溢出的其他教程,用替换图像(一般彩色)翻转样式替换社交导航图标 - 我只是希望它反弹并保持图像相同。认为它可能与某些事情有关:

-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;

想法?谢谢!

2 个答案:

答案 0 :(得分:2)

你的问题的答案非常简单

当您将<li>悬停时,他们会应用负余量。这是条形码的html代码

<ul id="social" class="msixcol mlast mright">
    <li id="twitter" class="fade"><a href="http://twitter.com/seanwes/" class="r">twitter</a></li>
    <li id="facebook" class="fade"><a href="http://www.facebook.com/seanwes" class="r">facebook</a></li>
    <li id="dribbble" class="fade"><a href="http://dribbble.com/seanwes" class="r">dribbble</a></li>
    <li id="instagram" class="fade"><a href="http://instagram.com/seanwes" class="r">instagram</a></li>
</ul>

这就是做魔术的css线:

#social li:hover { margin-top: -3px; }

转换只是给出了平滑的效果:

a,.fade,input,textarea { -webkit-transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }

答案 1 :(得分:1)

嗨,这里有一些非常简单的基础代码:

CSS:

.image{
    width:200px;
    height:200px;
    background:red;
    margin:0 auto;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML:

<div class="image transition"></div>

通过这种方式,您可以将转换作为类应用于您想要的任何元素,并记住转换应用于您编写的每个事物:hover。

here is a working Fiddle

以下是一些在列表中应用它的代码:

CSS:

ul{list-style:none; float:left;}
ul li{margin:15px;}
.image{
    width:200px;
    height:200px;
    background:red;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML:

<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>
<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>

Fiddle一如既往

现在您只需要将background:red;属性替换为
 background-image:url(yourimagepath.ext);你应该准备好了。