Удивительный эффект логотипа о Google Chrome

Лучше использовать chrome для открытия этого сайта, любой браузер webkit также может сделать.

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

Вы можете увидеть удивительный эффект об этом хромовом логотипе, когда вы наводите на него мышь. Я загружаю источник этой страницы, но, к сожалению, потерялся в ней.

Он использует нестандартные css -webkit-mask и -webkit-gradient, как показано ниже:

-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)))"

затем измените параметр% s

Если логотип достаточно большой, мы должны увидеть, что белый круг становится все больше и больше от центра.

Я пытался использовать jquery, но не могу его сделать. Может кто-то помочь?

Ответ 1

Вы можете анимировать его с помощью jQuery, используя интервал и настраивая такие свойства следующим образом:

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/

Ответ 2

Я изменил ответ ben на использование функции jQuery animate следующим образом:

$({ 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 });

демо