纯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; } 这是设置网页滚动条的宽度，宽度为0就没有了。

效果

源码

#container {
	margin: 0 auto;
	margin-top: 100px;
	width: 320px;
	height: 600px;
	border: 1px solid #666;
	box-shadow: 0px 0px 3px 1px #888;
	position: relative;
	overflow: hidden;
}
#footer {
	width: 100%;
	height: 50px;
	background: #ccc;
	box-shadow: 0px -1px 3px 1px #888;
	position: absolute;
	bottom: 0;
	top: 550px;
	text-align: center;
	float: right;
}
#content {
	height: 570px;
	overflow: hidden;
	overflow-y: scroll;
}
#content ul li {
	height: 150px;
	background: #ddd;
	box-shadow: 0px -1px 3px 0px #666;
	box-sizing: border-box;
	text-align: center;
	font-size: 18px;
	padding: 50px 5px;
}



		

			

				
第1条
				
第2条
				
第3条
				
第4条
				
第5条
				
第6条
				
第7条
				
第8条
			
		
		

			底部
		
	

加入广告

前面已经把信息流做好了，后面需要做的就是

1. 加入一张图片，让它在信息流的下面一层。具体实现：
   1. 在div#content中添加div#bg > img
   2. 设置div#bg填充父元素
   3. 设置z-index: -5将它放在下一层
2. 在信息流中增加一个空隙，使下面的图片能被看到。具体实现：
   1. 选一个合适位置的li
   2. 给这个li设置id='pre'
   3. 设置css， #pre{ margin-bottom: 150px}

OK， 完成了。

最终效果

最终代码

	
	



	

		

			

				
第1条
				
第2条
				
第3条
				
第4条
				
第5条
				
第6条
				
第7条
				
第8条
			
			

				
			
		
		

			底部
		
	

写在最后

我是iimT, 一个固执的技术直男。

我的微信公众号 : iimT 　　个人博客： iimT的个人博客