0

私は本当にここでこの効果を行う方法を知りたいです：

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

ビデオでは、1つをクリックします（まだ画面記録ウィンドウにあります）が、ホバーを介して機能します。

効果についてもっと理解するのに役立つ何かを指摘できますか？これはhttp://www.w3schools.com/css3/css3_transitions.aspだと確信しています

もしそうなら、私は「border-radius：」を使用してdivを円にした後、cssを使用してそれらを好きなように整列させます（divのように）

これはどのようにですか、それとももっと簡単な方法がありますか？またはjQueryプラグインまたは何か他のもの。

専門用語が不足していることをお詫びします....そして読んでくれてありがとう、どんな助けでも素晴らしいです！

4

1 に答える 1

0

1）border-radius50％の値で使用して、円を作成できます。

CSS3 transform2） ;を使用して要素を拡大できます。

CSS3 transition3） ;を使用して拡大を遅らせることができます。

作業デモ（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ジェネレーターを使用して、クロスブラウザーコードを作成します。

幸運を

于 2013-02-04T15:00:57.607 に答える