javascript - 如何在播放按钮效果上复制 Angry Birds MouseOver

Question

你们中的大多数人一定都玩过愤怒的小鸟游戏。其中，在开始屏幕上，我们看到了播放按钮。将鼠标悬停在它上面时，按钮的大小会增加。我试图复制类似的东西并想出了这个（在新窗口中启动）。现在，我的问题是，我应该使用哪种 CSS 效果来实现它，因为我使用的效果非常糟糕。

我的 Javascript 代码：

   $(document).ready(function () {
        $("#play_button").hover(
            function () {
                $('#play_button').css({ "height": "240px", "width": "250px" });
            },
            function () {
                $('#play_button').css({ "height": "225px", "width": "220px" });
            }
        );
    });

谢谢。

Answer 1

我不知道愤怒的小鸟播放按钮长什么样，但您可以使用悬停伪类和过渡使按钮在悬停时“增长”

小提琴：http : //jsfiddle.net/wuJD9/

#play {
  width: 220px;
  height: 225px;
  background: tomato;
  transition: .5s ease;
}

#play:hover {
  width: 250px;
  height: 240px;
}

Answer 2

对于 CSS

#play_button { height:225px; width:220px;}

悬停

#play_button:hover { height:225px; width:220px;}