Question

大多数人一定玩过“愤怒的小鸟”游戏。在它的开始屏幕上，我们会看到播放按钮。将鼠标悬停在按钮上时，按钮的大小会增加。我尝试复制类似的东西并提出this（在新窗口中启动）。现在，我的问题是，我应该使用哪种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

我不知道“愤怒的小鸟”按钮的外观是什么样的，但您可以使用hover pseudo class和transition

在悬停时使按钮“增长”

FIDDLE：http://jsfiddle.net/wuJD9/

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

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

Answer 2

for css

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

悬停

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

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

2 个答案: