天空的天空背后的光线，html5，css3（可能是动画）

Question

想问一下这是否可以用HTML（不是闪光灯），有一张照片可以说一些高清画面并创造一条像蝙蝠侠电影一样的光线，从左到右对角地飞向天空并在天空上显示圆形图像。这将是全屏图像淡入，然后光线渐渐消失，然后在天空上转圈。然后整张照片将淡出到其他图片，这将只是一张图片，而不是任何其他光线或任何东西。我不确定HTML5和CSS3是否可以使用也是可以使用的 - 这是可选的，最重要的是如果这可以在mac或pc上的浏览器中使用。

由于

Answer 1

是的，可以做到。

动画基本上是使用javascript完成的。 如果需要，您可以使用kinetic.js或fabric.js来帮助您完成项目。 甚至CSS3动画也可以使用精灵图像等来完成。 ：）

Answer 2

实际上是可能的。

做一个三明治＆＃39;带有两层的动画。 一个是背景，另一个是光束。可以使用javascript或css3对梁动画进行动画处理。我建议使用css3，因为它非常快并且使用图形加速。

要使其响应，您可以在两个div ， #beam 和 #background 上实施动画，第一个覆盖第二个。图像将设置为 background-size：cover 。

要使其响应正确且始终在屏幕中央显示蝙蝠侠徽标，只需将 background-position-x：100％; 添加到#beam和#background。

为了让您能够在手机上观看，我建议您使用不同尺寸的图片，您可以使用css3中的媒体查询进行管理。此外，我将使用启用了渐进模式的PNG（您可以启用它只需在Photoshop中保存为PNG渐进式）。这样，图像将是三个分辨率的三个图像的层，稍重，但浏览器将首先显示较低分辨率的图片，同时仍然下载完整的图片，然后完成后自动切换到高清图像。