Comment créer un cercle google plus avec effet mouseover?

Ceux d'entre vous qui ont vu google plus peuvent savoir ce que je prends à propos de ...Comment créer un cercle google plus avec effet mouseover?

Essentiellement, mon problème est le suivant. Je voudrais avoir un cercle avec un rayon par exemple d'un certain nombre de pixels avec du texte au centre. Au passage de la souris, le contour du cercle se dilate par rapport à ce qu'il était plus 5. Lorsque je souris, le cercle rétrécit progressivement à sa taille d'origine. Si vous cliquez sur le texte au milieu du cercle, une boîte d'alerte apparaît.

Quelle est une bonne manière de faire ceci et comment? Est-ce que cela implique des balises div?

Source

2011-07-20 Teivere

Voici le code CSS qu'ils utilisent:

.eswd { 
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent; 
} 

.esw { 
background-repeat: no-repeat; 
border: 0 none; 
cursor: pointer; 
display: inline; 
height: 15px; 
margin-left: 5px; 
overflow: hidden; 
vertical-align: 6px; 
width: 24px; 
}

HTML:

<button g:pingback="/gen_204?atyp=i&amp;ct=plusone&amp;cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.hvr(this,google.time())" onclick="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>

Source

2011-07-20 20:10:45 TheRealDK

Utiliser le rayon de frontière CSS3 pour créer votre cercle et certains JS pour faire les animations ... ou vous pouvez essayez de les faire avec CSS3 aussi.

http://jsfiddle.net/DOSBeats/cE6Yb/

Cette version utilise JS.

Source

2011-07-20 20:12:58 Seth

est-il possible de garder le texte au centre sans bouger, et d'élargir le cercle dans les 4 directions plutôt que de s'étendre juste du côté droit et du bas? – Teivere

Comment créer un cercle google plus avec effet mouseover?

Répondre

Questions connexes