城市化：走向城市
一条同时也是控件的时间线。年份滑块会填充一个由一百人组成的网格，并移动旁边的各地区条形图；下方每个里程碑都有一个按钮，可让浏览器跳到对应年份。圆点是 CSS 网格中的普通 HTML 元素，时间线则是一个有序列表，用伪元素画出主轴。
一百个人
全球
每 100 人中有 58 人居住在城镇
- 城镇
- 乡村
各地区城镇人口占比
2025竖线：该地区 1950 年的水平。各地区以五年为步长变化。
里程碑
-
不到十分之三
全球 28.8% 的人口居住在城镇。欧洲和大洋洲已是城镇人口占多数；在非洲和亚洲，这一比例约为七分之一。
28.8% -
南美洲转为城镇为主
到 1960 年，51.1% 的南美洲人居住在城市，十年前为 43.8%。到 2025 年这一比例达到 85.5%，为各地区最高。
51.1% -
亚洲停滞
亚洲的城镇人口占比十年间几乎没有变化，从 1960 年的 22.5% 到 1970 年的 23.6%，其间中国将数以百万计的城市青年送往农村。
23.6% -
大洋洲见顶
大洋洲的城镇人口占比在 72.0% 见顶，此后缓慢回落，2025 年为 67.6%：这是半个世纪以来乡村增长快于城市的唯一地区。
72.0% -
城镇人口过半
城市人口首次超过农村人口：占全球的 50.4%，上一年为 49.9%。
50.4% -
亚洲过半
拥有全球一半以上人口的亚洲转为城镇人口占多数：2017 年达到 50.2%，比 1950 年增长了两倍。
50.2% -
57.8%，仍在上升
非洲为 46.4%，是最后一个乡村人口占多数的主要地区；过去五年其占比上升了 2.1 个百分点，增速超过其他所有地区。
57.8%
数据
数据表
| 年份 |
|---|
居住在城镇地区的人口占比，%。
实现方式
-
点阵是十列 CSS 网格中的一百个
<i>元素；滑块在前 n 个元素上切换data-urban，动画由过渡效果完成。 - 各地区条形图是按实际宽度重绘的单个 SVG；切换年份时保留其元素，因此条形平滑移动而不是跳变。
-
时间线是一个
<ol>：主轴是列表上带渐变的::before，每个圆点是列表项上的::before，每个进度条则是一个--share自定义属性。
来源：联合国《世界城市化展望》（UN World Urbanization Prospects，2025 年修订版），由 Our World in Data 整理。城镇地区采用各国自己的定义，因此在一个国家算作城镇的地方，在另一个国家可能算作乡村。
用 ❤ 和 Htmlpress 构建