纯CSS 实现知乎滑动广告效果

放个好看的头图先

最近的时候刷知乎看到了这种广告效果

emmmmm… 简书把图片转成了黑白，忽视这个细节吧。

效果分析

1. 广告图片在信息流下面一层
2. 在信息流的列表中留一个缝隙，就能看到下面一层的图片了
3. 隐藏滚动条

嗯，看上去这么华丽的效果就是这么简单。

具体实现

1. 用一个div#container作为包裹层，里面ul > li*8 作为信息流， 一个绝对定位的div#footer。这样大体的框架就好了。
2. 调整一下高宽，加点边框和阴影。
3. 为了信息流的滑动，将div#content设置overflow: hidden; 和overflow-y: scroll;
4. 隐藏滚动条，设置::-webkit-scrollbar { width: 0px; } 这是设置网页滚动条的宽度ÿ