如何使用HTML＆amp; amp;创建一个“游戏结束”图像缩放到屏幕上JavaScript的？

Question

我正在为我的一个编程课程开发一个HTML游戏，我想添加一个“游戏结束”屏幕，它将在死亡前显示图像和信息。

我希望发生的是图像覆盖页面主体并从屏幕中间开始变小并“展开”或放大到特定大小的屏幕。我不确定这是否清楚，但这是我正在寻找的东西：

但我想放大而不是只是出现。任何链接或帮助将不胜感激，因为我甚至不知道在谷歌搜索什么来获取此信息！

提前感谢您的帮助！

Answer 1

这真的很粗糙，但你可以这样做：

JS

var $foo = $('#foo');

grow = function (size) {
    if (size < 50) {
        console.log(size);
        $foo.css('width', size + '%');
        $foo.css('height', size + '%');
        size++;
        setTimeout(grow, 10, size);
    }
}

grow(0);

CSS

#foo {
    position: fixed;
    right: 0;
    left: 0;
    top:0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top:auto;
    margin-bottom:auto;
    width: 0%;
    height: 0%;
    background-color: red;
}

https://jsfiddle.net/a05s1a44/

更改超时长度以控制速度。根据需要调整CSS。缩放尺寸变量以适应您的尺寸。改变限制。做任何事。应该足以让你前进。

Answer 2

这是CSS转换和转换的完美用例。

非常基本：

#image {
  transition: all 0.5s;
}

#image.hidden {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.5);
}

然后你只是以某种方式切换.hidden类，可能是由JS。 另外，不要忘记添加供应商前缀（或使用Autoprefixer）。

有关更好的示例，请参阅http://codepen.io/anon/pen/waaMvM。