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

放个好看的头图先

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

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

效果分析

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

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

具体实现

用一个div#container作为包裹层，里面ul > li*8 作为信息流，一个绝对定位的div#footer。这样大体的框架就好了。
调整一下高宽，加点边框和阴影。
为了信息流的滑动，将div#content设置overflow: hidden; 和overflow-y: scroll;
隐藏滚动条，设置::-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;
}<div id="container"><div id="content"><ul><li>第1条</li><li>第2条</li><li>第3条</li><li>第4条</li><li>第5条</li><li>第6条</li><li>第7条</li><li>第8条</li></ul></div><div id="footer">底部</div></div>

加入广告

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

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

OK，完成了。

最终效果

最终代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>仿知乎背景滑动</title>
<style>
* {margin: 0;padding: 0;
}
ul li {list-style: none;
}
/******美化滚动条样式********/
::-webkit-scrollbar{width: 0px;
}
#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;
}
#bg {position: absolute;top: -1px;z-index: -5;
}
#pre {margin-bottom: 160px;
}
</style>
</head>
<body><div id="container"><div id="content"><ul><li>第1条</li><li>第2条</li><li>第3条</li><li id="pre">第4条</li><li>第5条</li><li>第6条</li><li>第7条</li><li>第8条</li></ul><div id="bg"><img src="bg.png"></div></div><div id="footer">底部</div></div>
</body>
</html>

写在最后

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

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

纯CSS 实现知乎滑动广告效果相关推荐

html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
OneNav一为主题魔改教程（二）：使用纯css增加网站Logo扫光效果--洞五洞洞幺
今日主题: 使用纯css增加网站Logo扫光效果声明:本篇有违"魔改"这个标题:本篇只为增加收录.并且复习使用纯css给logo加上扫光效果. 效果: 可以目测洞五洞洞幺导航 ...
html怎么实现蓝色垂直的直线,css实例教程一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: 复制代码代码如下 ...
html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
试用php语言写气泡,如何用纯CSS实现语音聊天气泡框效果
本篇文章主要给大家介绍怎么用纯css实现语音聊天气泡框效果. 推荐参考教程:<CSS教程> 语音聊天气泡框效果,在我们日常生活中或者社交网站上,都是非常常见且流行的一种对话框效果. 比如微 ...
css 实现一横排圆点,使用纯CSS怎么实现圆点错觉的效果
使用纯CSS怎么实现圆点错觉的效果发布时间:2020-09-14 11:30:40 来源:亿速云阅读:75 作者:小新这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果,文中介绍的非常详细,具有 ...
纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果 <!DOCTYPE html> <html> <head> <meta name="viewport" ...
html用css写彩虹,如何使用纯CSS实现彩虹条纹文字的效果（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现彩虹条纹文字的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...
css玻璃雨滴效果,纯css实现窗户玻璃雨滴逼真效果_javascript技巧
写样式,毕竟每个雨滴都长得不一致嘛.使用预处理器除了可以帮助我们减少工作量之外,还可以使用预处理器中的循环.变量等.最主要的是可以使用随机函数产生的随机值,让我们不需要单独处理上百个雨滴. 有关于HA ...

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

效果分析

具体实现

效果

源码

加入广告

最终效果

最终代码

写在最后

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

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

纯CSS 实现知乎滑动广告效果相关推荐

最新文章

热门文章

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

效果分析

具体实现

效果

源码

加入广告

最终效果

最终代码

写在最后

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

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

纯CSS 实现知乎滑动广告效果相关推荐

最新文章

热门文章

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