纯 CSS 实现的狙击怪兽闯关小游戏

    是的,你没看错,就是使用纯 CSS 创建的打怪兽闯关小游戏,实现方式也不复杂,首先是选用了一些游戏图片素材,接着通过 CSS 控制这些素材产生连续的动画效果,用到了 grid-*、image-rendering、transform-* 以及重要的 animation-* 等属性,这些属性在平时的设计中用的不多,但是在需要复杂动画场景的需求中特别好用,游戏主要内容是通过鼠标的滚动控制前进方向,并且通过点击狙击小怪兽。

模板目录结构如下: