html设计网页下滑时让div逐个浮现

要实现网页下滑时让div逐个浮现的效果，可以使用CSS中的动画和JavaScript中的滚动事件。

具体实现步骤如下：

1. 在CSS中，给要浮现的div元素设置透明度为0，并添加一个过渡效果（transition）。

2. 添加一个CSS类，将透明度设置为1，这个类将在后面的JavaScript代码中被添加到div元素中。

3. 在JavaScript中，监听滚动事件（scroll）。

4. 当滚动距离大于等于某个值时，添加CSS类到div元素中，让它浮现出来。

下面是一个示例代码：

HTML部分：

<div class="fade-in">Div 1</div>
<div class="fade-in">Div 2</div>
<div class="fade-in">Div 3</div>

CSS部分：

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.fade-in.active {
  opacity: 1;
}

JavaScript部分：

const fadeElems = document.querySelectorAll('.fade-in');

function checkFade() {
  fadeElems.forEach((fadeElem) => {
    const fadeElemTop = fadeElem.getBoundingClientRect().top;
    const fadeElemHeight = fadeElem.offsetHeight / 2;
    const scrollTop = window.pageYOffset + window.innerHeight;

    if (scrollTop > fadeElemTop + fadeElemHeight) {
      fadeElem.classList.add('active');
    }
  });
}

window.addEventListener('scroll', () => {
  checkFade();
});

这样，在网页下滑时，每个div元素都会逐个浮现出来。当滚动距离大于等于某个div元素的位置时，这个div元素就会添加一个CSS类，让它的透明度从0到1，实现逐渐浮现的效果。