2012-10-12 137 views
15

Mejor uso de Chrome para abrir este sitio, cualquier navegador de webkit puede hacerlo también.El increíble efecto de logotipo sobre google chrome

https://www.google.com/intl/en/chrome/browser/

Se puede ver el efecto sorprendente de que el logotipo de cromo cuando se pone el ratón sobre ella. Descargo la fuente de esa página, pero desafortunadamente me perdí en ella.

Utiliza CSS no estándar -webkit-mask y -webkit-gradient, como a continuación:

-webkit-mask: "-webkit-gradient(radial, 17 17, %s, 17 17, %s," + "from(rgba(0, 0, 0, 1))," + "color-stop(0.5, rgba(0, 0, 0, 0.2))," + "to(rgba(0, 0, 0, 1)))" 

continuación, cambie el parámetro% s

Si el logotipo es lo suficientemente grande como deberíamos ver un círculo blanco cada vez más grande y más grande de el centro

Intenté usar jquery pero no puedo hacerlo. ¿Alguien me puede ayudar?

+0

Así y ¿Estás luchando por animar el degradado en jQuery? Si aplica ese estilo a un elemento (cambiando el '% s') no se mueve, lo cual es correcto. Podrías hacer esto en '-webkit-animation', creo? – James

Respuesta

17

Puede animarlo con jQuery mediante el uso de un intervalo y ajustar las propiedades de este modo:

var radius = 0; 

var interval = window.setInterval(function() { 
    $("#chrome").css("-webkit-mask", "-webkit-gradient(radial, 17 17, " + radius + ", 17 17, " + (radius + 15) + ", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))"); 
    radius++; 
    if (radius === 124) { 
     window.clearInterval(interval); 
    } 
}, 20);​ 

http://jsfiddle.net/sync/WHAXg/

+0

Gracias Ben, tu respuesta es muy explícita, especialmente el enlace, maravilloso. – huangbeidu

+0

Gracias :) He mejorado el código un poco desde que publiqué también, ahora solo un radio variable, por lo que es un poco más claro y simple. – sync

2

he modificado la respuesta de ben utilizar la función jQuery animate así:

$({ inner_radius : 0 }).animate({ inner_radius : 123 },{ step : function(A){ 
    var delta_radius = 15; 
    $("#chrome").css("-webkit-mask","-webkit-gradient(radial, 17 17, "+inner_radius+", 17 17, "+(inner_radius+delta_radius)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))"); 
}, duration : 2000 }); 

demo

+1

Gracias, este parece jquery más conciso y puro. – huangbeidu

Cuestiones relacionadas