如何在「懸停/焦點」上「反彈」社交導航圖標？在堆棧

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>他們施加負margin.This是酒吧

<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> 

的HTML代碼，這是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> 

這樣你可以申請轉變爲一個類

任何你想要的元素，並記住過渡是適用於你寫的每一件事：懸停。

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);並且您應該準備好了。