CSS代码实现向下滑动依次展示div块 - 简单教程

以下是一个简单的CSS代码示例，可以实现往下滑动依次展示div块的效果：\n\nHTML代码：\nhtml\n<div class="container">\n <div class="block">Div 1</div>\n <div class="block">Div 2</div>\n <div class="block">Div 3</div>\n <div class="block">Div 4</div>\n</div>\n\n\nCSS代码：\ncss\n.container {\n height: 400px; /* 设置容器的高度 */\n overflow-y: scroll; /* 开启垂直滚动条 */\n scroll-behavior: smooth; /* 平滑滚动效果 */\n}\n\n.block {\n height: 200px; /* 设置每个div块的高度 */\n margin-bottom: 20px; /* 设置div块之间的间距 */\n background-color: #f2f2f2;\n text-align: center;\n line-height: 200px;\n font-size: 24px;\n}\n\n\n在上面的代码中，我们创建了一个容器（class="container"），设置了容器的高度为400px，并开启了垂直滚动条。每个div块（class="block"）的高度为200px，之间有20px的间距。当用户滚动容器时，会出现平滑滚动的效果，依次展示每个div块的内容。