Эффект логотипа Battlefield 3

Question

Для тех, у кого есть Battlefield 3, может кто-нибудь объяснить мне, как воссоздать эффект, который делает логотип «мерцающим». Я знаю, что изображение имеет 3 состояния (при наведении мыши, при наведении курсора и при наведении мыши), но я не знаю, как сделать его мерцающим.

Эффект логотипа можно увидеть, войдя в BF3 Battlelog и наведя на него логотип.

У кого-нибудь есть идеи?

Answer 1

Это событие, которое прикреплено к изображению:

var $headerLogoBF3=$("a.base-header-logo-bf3");
$headerLogoBF3.pageBind("mouseover", function() {
  try {
    $(this).stop().animate({backgroundPosition:"0px -136px"},80, function() {
      $(this).stop().animate({backgroundPosition:"0px -68px"});
    });
  } catch(e){}
});
$headerLogoBF3.pageBind("mouseout",function( {
  try{
    $(this).stop().animate({backgroundPosition:"0px 0px"},"slow");
  } catch(e){}
});

Answer 2

Никакой магии здесь, она просто переключает изображение при наведении курсора. Если вы проверите DOM при наведении курсора на логотип, вы увидите, как положение фона изменяется с 0 0 до 0 ~ -100px и, наконец, до 0 ~ -50px, что с этим изображением http://battlelog -cdn.battlefield .com / public / base / bf3 / header-logo2.png? v = 590 , заставляет его сначала перейти к последнему "мерцающему", а затем к среднему.

Редактировать: Чтобы достичь этого, вы должны сказать что-то вроде:

$('#logo').hover(function () {
    var logo = $(this);

    logo.css('background-position', '0 -100px');

    setTimeout(function () {
        logo.css('background-position', '0 -50px');
    }, 5);
}, function () {
    $(this).css('background-position', '0 0');
});

Edit2: вам может даже не понадобиться setTimeout.

Answer 3

Вы на самом деле ответили на свой вопрос:

Изображение содержит изображение с наведением мыши и наведением мыши.Наведение - это, вероятно, небольшой GIF-файл, который заменяется изображением мыши, как только он закончится.Ничего сложного и, вероятно, невозможно с чистым CSS!

Удачи.

Редактировать: Мой ответ был неверным.Они используют одно изображение, по которому они перемещаются в зависимости от движения мыши.См. Ответ Powerbuoy для правильного объяснения.