CSS3過渡 - 技能泡沫的事情嗎？

Question

我真的很想知道怎麼在這裏做這樣的效果：

http://www.youtube.com/watch?v=TtG8w7_C0TI&feature=youtu.be

在視頻我點擊一個（仍然在屏幕記錄窗口），但他們通過懸停工作。

莫非一些點東西，這將幫助我瞭解更多關於效果我很肯定這是http://www.w3schools.com/css3/css3_transitions.asp

，如果是這樣，我想我使用「邊界半徑：」做一個div成然後只是對齊他們如何我希望使用CSS（如你將如何一個div）

這是如何或有一個更簡單的方法？或jQuery插件或別的東西。

對不起，我缺少的技術術語....並感謝您的閱讀，任何幫助是巨大的！

Answer 1

1）您可以使用值爲50％的border-radius來創建一個圓;

2）可以放大使用CSS3 transform你的元素;

3）您可以使用CSS3 transition延遲放大;

工作演示（在FireFox）：

http://jsfiddle.net/ZmtCW/1/

HTML：

<div class="circle"> 
    <br/>I'm a circle 
</div> 

CSS：

.circle{ 
    margin: 100px; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: darkkhaki; 
    -moz-transition-property: -moz-transform; 
    -moz-transition-duration: 1s; 
    text-align: center; 
    overflow: hidden; 
} 

.circle:hover{  
    -moz-transform: scale(1.2); 
} 

用驚人CSS3 Generator來創建跨瀏覽器碼。

祝你好運