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