CSS3 过渡 - 技能泡沫的事情？

【问题标题】：CSS3 Transitions - skills bubble thing?CSS3 过渡 - 技能泡沫的事情？
【发布时间】：2013-01-19 06:59:42
【问题描述】：

我真的很想知道如何在这里制作这个效果：

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 插件或者别的什么。

对不起，我缺乏技术术语....感谢您的阅读，任何帮助都很棒！

【问题讨论】：

标签： css transitions

【解决方案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 创建您的跨浏览器代码。

祝你好运

【讨论】：