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

Question

嗨友好的偷看堆栈，

任何人都知道以下 CSS 悬停效果是如何产生的：

http://seanwes.com/

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

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

想法？谢谢！

Answer 1

你的问题的答案很简单

当您将鼠标悬停时，<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; }

Answer 2

嗨，这很简单，这里有一些基础代码：

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 中编写的每一件事。

这是一个工作小提琴

这是一些在列表中应用它的代码：

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>

和小提琴一样

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