想问问是否可以使用HTML(非Flash)实现这种效果,让图片说出一些高清图片,并创造出类似蝙蝠侠电影中的光线,就像在蝙蝠侠电影中从左到右对角向天空并显示圆圈一样在天空上的图像。这将是全屏图像淡入,然后光线淡入然后在天空上盘旋。然后,整个图片将逐渐淡出为其他图片,而这仅仅是一幅图片,而不是其他光线或其他任何东西。我不确定HTML5和CSS3是否也可以使之具有响应性-这是可选的,最重要的是,如果它可以在Mac或PC上的浏览器中工作。
谢谢
实际上是可能的。
用两层制作一个“三明治”动画。一个是背景,另一个是光束。光束动画可以使用javascript或css3进行动画处理。我建议使用css3,因为它非常快并且使用图形加速。
为了使其具有响应性,您可以在#beam和#background两个div上实现动画,第一个div覆盖第二个div。图像将设置为背景尺寸:cover。
要使其响应正确并始终在屏幕中央显示蝙蝠侠徽标,只需添加background-position-x:100%;到#beam和#background。
为了使它在移动设备上看起来不错,我建议使用不同大小的图像,您可以通过css3中的媒体查询来管理这些图像。另外,我将使用启用了渐进模式的PNG(您可以将其简单地以PNG渐进方式保存在Photoshop中)。这样,图像将是三个分辨率的三层图像的层,稍微重一些,但是浏览器将首先显示较低分辨率的图像,同时仍下载完整图像,然后在完成后自动切换到HD图像。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句