Transizioni CSS3 - abilità bubble bubble? - css3, transizioni

Mi piacerebbe davvero sapere come fare questo effetto qui:

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

Nel video faccio clic su uno (ancora nella finestra di registrazione dello schermo), ma funzionano tramite hover.

Qualche cosa potrebbe indicare qualcosa che mi aiuterà a capire di più sull'effetto, sono sicuro che sia proprio così http://www.w3schools.com/css3/css3_transitions.asp

e se lo è, immagino di usare "border-radius:" per fare un div in un cerchio, quindi allineali come vorrei usare il css (come se fossi un div)

È così o esiste un modo più semplice? o un plugin jQuery o qualcos'altro.

Scusate per la mia mancanza di termini tecnici .... e grazie per la lettura, ogni aiuto con essere grandioso!

risposte:

0 per risposta № 1

1) Puoi usare border-radius con un valore del 50% per creare un cerchio;

2) Puoi ingrandire il tuo elemento usando CSS3 transform;

3) È possibile ritardare l'ingrandimento usando CSS3 transition;

Demo di lavoro (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);
}

Usa l'incredibile Generatore CSS3 per creare il tuo codice cross-browser.

In bocca al lupo

---