http://www.bilibili.com/html/...类似如上页面的banner部分,是用什么样的方式实现的?
总共用了5个p,设置每个背景图片,图片格式均为png图片,然后对每个p都设置了transform:translate();监听用户的滚动事件scroll,并且设置不同的递增值.然后错位视觉滚动就来了,有兴趣自己可以去搜索下.五张图为:
可以设置一个有透明度的 p
图像处理软件制作或者背景图像 上面覆盖 RGBA背景的p 再覆盖 PNG图像
总共用了5个p,设置每个背景图片,图片格式均为png图片,然后对每个p都设置了transform:translate();
![](http://img.php.cn/upload/image/000/000/000/3cae7dd7c91b077853d506e977b2ffb6-0.png)
![](http://img.php.cn/upload/image/000/000/000/245cee8e614206cc0690e287efb39e02-1.png)
![](http://img.php.cn/upload/image/000/000/000/245cee8e614206cc0690e287efb39e02-2.png)
![](http://img.php.cn/upload/image/000/000/000/051b10de78013f1e43e871c0c390945f-3.png)
![](http://img.php.cn/upload/image/000/000/000/52879f6d563241b1a13cf02d1c7e52b3-4.png)
监听用户的滚动事件scroll,并且设置不同的递增值.然后错位视觉滚动就来了,有兴趣自己可以去搜索下.
五张图为:
可以设置一个有透明度的 p
图像处理软件制作
或者
背景图像 上面覆盖 RGBA背景的p 再覆盖 PNG图像