💡
原文中文，约700字，阅读约需2分钟。
📝
内容提要
本文介绍了作者建立的一个收录分享内容的网站，包括防剧透模式和移动端搜索框隐藏展示等技术点。作者还分享了参考资料和开源代码。
🎯
关键要点
- 作者建立了一个收录分享内容的网站，灵感来源于 Austin 的想法。
- 网站的主功能在一个周末内完成，采用了浏览器端 0 JS 的技术。
- 实现了防剧透模式和移动端搜索框隐藏展示，使用了 CSS 的 ':checked 伪类' 和 '+ 紧邻兄弟组合器'。
- 参考了 CSS View Transitions 实现过渡动画，使用 HTML 的 popover 属性实现图片灯箱。
- 使用 CSS animation-timeline 实现返回顶部的展示和隐藏，适用于 Chrome 115 以上版本。
- 采用 grid 布局实现多图瀑布流布局，使用 1px 的透明图片做访问统计的 LOGO 背景。
- 禁止浏览器端 JS 运行，使用 Content-Security-Policy 的 script-src 'none'。
- 项目开源后获得了800+的 star，受到了很多人的喜爱。
- 提供了 GitHub 链接供感兴趣的人查看。
➡️
