天际线背后向天空的光线,html5,css3(可能是动画)

拉德克

想问问是否可以使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用HTML5数据属性的CSS3动画

来自分类Dev

CSS3 / HTML5中的发光动画效果

来自分类Dev

使用html5数据属性的css3动画

来自分类Dev

上下移动画布-html5 / css3

来自分类Dev

盖“曼哈顿天际线”使用矩形的最小数量

来自分类Dev

使用城市天际线API创建道路

来自分类Dev

HTML,HTML5和CSS与CSS3?

来自分类Dev

HTML5 / CSS3:CSS区域

来自分类Dev

CSS3 / HTML5 / JS-如何创建具有幻灯片效果的动画纹理背景?

来自分类Dev

CSS3 HTML5和JQuery矩阵

来自分类Dev

字段集内的HTML5图例的CSS3

来自分类Dev

CSS3 HTML5全景查看器

来自分类Dev

如何检查符合html5 / css3的网页

来自分类Dev

HTML5 / CSS3媒体查询

来自分类Dev

CSS3 HTML5滚动问题

来自分类Dev

内联HTML5 / CSS3列

来自分类Dev

HTML5和CSS3流程图

来自分类Dev

帮助html5和css3

来自分类Dev

在HTML5 CSS3中实现椭圆菜单

来自分类Dev

CSS3 HTML5和JQuery矩阵

来自分类Dev

CSS3 & HTML5 ; 过渡不起作用

来自分类Dev

CSS3菜单显示错误(CSS3 / HTML5)

来自分类Dev

曼哈顿天际线封面未通过一些测试案例

来自分类Dev

如何在 Three.js 中创建无限楼层(天际线)?

来自分类Dev

calc()CSS函数的HTML5 + CSS3向后兼容性

来自分类Dev

如何在Sublime Text 3上使用HTML5和CSS3?

来自分类Dev

HTML5和CSS3规范如何确定div元素的显示属性?

来自分类Dev

HTML5 / CSS3布局以显示任务运行状态

来自分类Dev

如何为CSS3 html5进度元素设置颜色?