css3滑动页面内容渐显 |jqcss属性

/*HTML部分*/
<div class="page-wrap">
<div class="page">
<h1>滑动页面内容渐显</h1>
<p>这里是第一个段落，页面向下滑动时，本段落的内容会逐渐显示</p>
<p>这里是第二个段落，页面向下滑动时，本段落的内容会逐渐显示</p>
<p>这里是第三个段落，页面向下滑动时，本段落的内容会逐渐显示</p>
</div>
</div>
/*CSS部分*/
* {
margin: 0;
padding: 0;
}
.page-wrap {
height: 100vh;
overflow: hidden;
}
.page {
height: 300vh;
background-color: #0f0;
transform: translateY(0);
transition: transform 1s ease-in-out;
}
.page p {
margin-top: 100vh;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.page p:nth-child(odd) {
margin-left: 100vw;
}
.page p:nth-child(even) {
margin-right: 100vw;
}
/*鼠标滑动事件*/
.page-wrap:hover .page {
transform: translateY(-66.666%);
}
.page-wrap:hover .page p {
margin-top: 0;
opacity: 1;
}

通过上述代码，大家可以实现如下的滑动页面内容渐显的效果：

当鼠标滑动页面时，整个页面会向上滑动，并将页面中的各个段落逐一显示出来，而且还带有渐显效果。这不仅能够让页面更加生动，还能够让访问者更好地理解页面内容，使用户体验更加舒适和愉悦。