0

我真的很想知道如何在这里做到这一点：

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 插件或其他东西。

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

4

1 回答 1

0

1) You can use border-radius with a value of 50% to create a circle;

2) You can enlarge your element using CSS3 transform;

3) You can delay the enlargement using CSS3 transition;

Working demo (in 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);
}

Use the amazing CSS3 Generator to create your cross-browser code.

Good luck

于 2013-02-04T15:00:57.607 回答