主要观点:介绍了已关停的 Cohost.org 及其独特的 HTML 支持所带来的创意玩法,如“width-hacking”和 SVG 动画,展示了如何利用这些特性实现各种有趣的效果和游戏。
关键信息:
- Cohost.org 于 2022 年 6 月公开,2024 年 9 月关停,其服务器已消失,仅 Wayback Machine 有存档。
- 用户大多是小众互联网创作者及其朋友,被其反资本主义设计吸引,网站无广告和关注者计数,发布界面支持部分 HTML。
- “width-hacking”利用
<details>
元素和calc()
函数实现各种功能,如组合锁、瓷砖匹配游戏等。 - SVG 可用于存储矢量图像,其内部可包含
<style>
块用于配置元素属性,且其样式可使用媒体查询,还能在 SVG 内使用 CSS 动画。
重要细节: - 通过给
<summary>
元素固定位置、大小和边框样式,创建可点击的按钮效果,利用<div>
元素实现按钮状态切换。 - 利用三个
<details>
元素在inline-flex
容器中的宽度变化,可表示多种状态,如用于谜题游戏或塔防游戏。 - 在 SVG 背景中使用媒体查询可根据容器大小改变元素属性,如颜色,通过添加“dummy animation”可解决浏览器对 SVG 动画检测的问题,实现平滑过渡。
- 示例包括用 SVG 实现秘密消息显示、塔防游戏等,还推荐了相关的链接和视频。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。