css中鼠标滚动内容出现 |css样式表高级应用

/* 滚轮滚动时的动态效果 */
.container {
overflow: hidden;
width: 100%;
height: 100%;
perspective: 1000px;
}
.article {
overflow-y: scroll;
height: 100%;
transform-style: preserve-3d;
}
.article::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
.article>div {
position: relative;
width: 100%;
height: 100%;
}
.article>div>div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
opacity: 0;
transition: opacity 0.5s;
}
.article>div.active>div {
opacity: 1;
}

上述代码中，大家定义了一个容器（.container）和一个滚轮滚动区域（.article）。

容器的作用是隐藏超出部分，使滚轮滚动效果更突出。大家使用了CSS3的perspective属性来运用透视效果，并指定一个透视距离，使内容元素在滚动时可以产生立体感。

滚动区域的overflow-y属性被赋值为scroll，表示当内容超出滚动区域时，会显示滚动条。大家同时也将transform-style属性设置为preserve-3d，以便将每个子元素单独的呈现出来。

在每个子元素中，大家设置了position为relative，并添加了一个嵌套的div元素，并对所有子元素应用了transform: translateZ(0)属性来应用3D效果，同时opacity属性被设置为0。

在外层div上，大家定制了一个active类，每次当用户滚动鼠标时，active类会被赋予给被滚动到的元素，这样就可以产生动态效果，使元素逐渐从透明变为不透明。