在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
这个效果是仿照Chirs Coyier的视差教程实现的,经过Chirs的允许使用了其中的星空背景。
运行效果:
将CSS背景容器设置在一个固定的位置,并通过top、left、bottom和righ属性让它占据页面的底部。背景图片通过 background属性来指定,最先指定的就是最顶层的背景。每一幅图片都按照百分比进行定位,而且它们的位置各不相同,这样当容器的尺寸改变的时候, 各个图像就会发生移动,从而产生视差效果
可以将移动速度增大来获得更有趣的效果,另外还可以添加一些鼠标动做,最终的CSS代码如下: 小资料:视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。(译/曹巳甲) |
请发表评论