css3滚动下拉加载单个出现渐隐效果

1、新建html文档。

3、初始化css代码。<style>html, body { margin: 0px; padding: 0px; }body { background: #323232; font-family: 'Lato', Times, 'Times New Roman', serif; font-size: 16px; color: #eee; margin-bottom: 40px; line-height: 1; }a { color: cyan; }article { display: inline-block; margin: 20px; }h2 { font-size: 16px; margin-bottom: 20px; text-transform: uppercase; }small { opacity: 0.6; font-style: italic; font-size: 14px; margin-left: 5px; }ul { position: relative; width: 230px; height: 480px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: scroll; list-style: none; -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; }ul li { position: relative; padding: 16px; background: #eee; color: #252525; font-size: 18px; z-index: 2; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); }ul li:nth-child(odd) { background: #fff; }</style>

5、代码整体结构。