"[图片] Demo [图片] 下一代的社区系统,为未来而构建 一个用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台。 Sym - sym.b3log.org 源码地址 [图片] b3log/index 🎉 B3log 主页。. Contribute to b3log/index developmen .."

如何实现 im.qq.com 首页视觉差效果

本贴最后更新于 452 天前,其中的信息可能已经天翻地覆

imagepng

Demo

源码地址

原理

使用 background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

html 结构

imagepng

css

.bg {
    position: relative;
    width: 100%;
    height: 600px;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(images/bg2.jpg);
}

  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:PipeSoloSymWide 等,欢迎大家加入,贡献开源。

    2599 引用 • 4211 回帖 • 633 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    74 引用 • 301 回帖 • 2 关注
  • Sym

    Sym 是一个用 Java 实现的现代化社区(论坛 / 社交网络 / 博客)平台,“下一代的社区系统,为未来而构建”。黑客派就是使用该系统搭建的 ❤️

    353 引用 • 3799 回帖 • 643 关注
感谢    关注    收藏    赞同    反对    举报    分享
7 回帖    
请输入回帖内容...
  • iTanken      

    厉害了,这效果很爽

    1 回复 
    感谢    赞同    反对    举报    分享       回复
  • Vanessa            

    拿去花

    1 回复 
    感谢    赞同    反对    举报    分享       回复
  • iTanken            

    必须的 😆 😆

    感谢    赞同    反对    举报    分享       回复
  • tu1091848672      

    那个 点击 demo 出现 3 秒计时 效果的 js 在哪个文件呀 挺好看的

    1 回复 
    感谢    赞同    反对    举报    分享       回复
  • Vanessa            
    1 回复 
    感谢    赞同    反对    举报    分享       回复
  • J            

    倒计时 3 秒后才跳转。这个延时的初衷是啥?

    1 回复 
    感谢    赞同    反对    举报    分享       回复
  • Vanessa            

    想对外链进行统计,就像 discourse 一样。还有 PipeSolo 同步过来的文章打开需要直接跳转到作者的博客,而不是继续停留在 hacpai.com

    感谢    赞同    反对    举报    分享       回复
请输入回帖内容...