CSS效果與後：後面的另一圈圈

Question

參考： http://tympanus.net/Development/IconHoverEffects/#set-7

當你過渡的任何在上面的鏈接圓圈圖標，它消失在曲線（我相信是那個圈子背後另有白色圓圈這彈出）。我不想要這種翻滾效果，但我想在這個圓周附近有一條簡單的曲線。

我相信我們可以用cssafter這樣做。我試圖創建一個.circle類，並把after增加10px的邊際，但它不起作用。

任何人都可以檢查我的代碼，或建議如何實現這一目標？

的jsfiddle：http://jsfiddle.net/dBQ5s/

CSS

.circle { 
    background:#000; 
    color:#FFF !important; 
    text-align:center; 
    -moz-border-radius:75px; 
    -webkit-border-radius:75px; 
    border-radius:75px; 
    width:100px; 
    height:100px; 
    border:5px SOLID RED; 
} 

.circle:after { 
    background:green; 
    -moz-border-radius:75px; 
    -webkit-border-radius:75px; 
    border-radius:75px; 
    width:120px; 
    height:120px; 
    margin-left:20px; 
    margin-top:20px; 
} 

Answer 1

這種影響正在被box-shadow，僅此而已所致。 ：]

他們是雖然在該頁面上使用僞元素！

重要提示請確保將content: "";和我個人的display: block;包含到它們的CSS中的僞元素。

這是我加入以達到效果的CSS，

.circle { 
    background:#000; 
    color:#FFF !important; 
    text-align:center; 
    -moz-border-radius:75px; 
    -webkit-border-radius:75px; 
    border-radius:75px; 
    width:100px; 
    height:100px; 
    border:5px SOLID #fff; 
} 

.circle:hover { 
    box-shadow: 2px 3px 0 black; 
} 

這裏是一個小提琴：DEMO

---

這裏是你將如何實現相同的動畫和效果與僞元素，

.circle { 
    background:#000; 
    color:#FFF !important; 
    text-align:center; 
    -moz-border-radius:75px; 
    -webkit-border-radius:75px; 
    border-radius:75px; 
    width:100px; 
    height:100px; 
    position: relative; 
} 

.circle:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -55px; 
    margin-top: -55px; 
    width: 110px; 
    height: 110px; 
    border-radius: 50%; 
    z-index: -1; 
    box-shadow: 3px 5px 0 black; 
    opacity: 0; 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 

} 

.circle:hover:before { 
    opacity: 1; 
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
} 

小提琴：DEMO