CSS3 Transitions - 技巧泡泡的事？

Question

我真的很想知道如何在这里实现这种效果:

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

在视频中我点击了一个(仍在屏幕录制窗口中)，但它们通过悬停工作。

可以指出一些可以帮助我更多地了解效果的东西吗？我很确定就是这样 http://www.w3schools.com/css3/css3_transitions.asp

如果是的话，我想我使用“border-radius:”将一个 div 制作成一个圆圈，然后按照我希望的方式使用 css 对齐它们(就像你想要一个 div 一样)

是这样还是有更简单的方法？或 jQuery 插件或其他东西。

抱歉我缺乏技术术语....感谢阅读，任何帮助都很棒!

Answer 1

1) 可以使用border-radius 值为50% 来创建一个圆；

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创建您的跨浏览器代码。

祝你好运