战场3 logo效果

Question

对于那些有“战场3”的人，能不能有人给我解释一下如何重现“闪光”标志的效果。我知道图像有3种状态(鼠标移出、鼠标悬停和鼠标移入)，但我不知道如何让它闪闪发光。

徽标的效果可以通过登录BF3战场日志并在徽标上移动鼠标来查看。

有谁知道吗？

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的答案。