css3滚动下拉加载单个出现渐隐效果
1、新建html文档。
2、书写hmtl代码。
<div id="main">
<article>
<h2>Grow</h2>
<ul class="grow">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty</li>
<li>Twentyone</li>
<li>Twentytwo</li>
<li>Twentythree</li>
<li>Twentyfour</li>
<li>Twentyfive</li>
<li>Twentysix</li>
<li>Twentyseven</li>
<li>Twentyeight</li>
<li>Twentynine</li>
<li>Thirty</li>
<li>Thirtyone</li>
<li>Thirtytwo</li>
<li>Thirtythree</li>
<li>Thirtyfour</li>
<li>Thirtyfive</li>
<li>Thirtysix</li>
<li>Thirtyseven</li>
<li>Thirtyeight</li>
<li>Thirtynine</li>
<li>Forty</li>
<li>Fortyone</li>
<li>Fortytwo</li>
<li>Fortythree</li>
<li>Fortyfour</li>
<li>Fortyfive</li>
<li>Fortysix</li>
<li>Fortyseven</li>
<li>Fortyeight</li>
<li>Fortynine</li>
<li>Fifty</li>
<li>Fiftyone</li>
<li>Fiftytwo</li>
<li>Fiftythree</li>
<li>Fiftyfour</li>
<li>Fiftyfive</li>
<li>Fiftysix</li>
<li>Fiftyseven</li>
<li>Fiftyeight</li>
<li>Fiftynine</li>
<li>Sixty</li>
<li>Sixtyone</li>
<li>Sixtytwo</li>
<li>Sixtythree</li>
<li>Sixtyfour</li>
<li>Sixtyfive</li>
<li>Sixtysix</li>
<li>Sixtyseven</li>
<li>Sixtyeight</li>
<li>Sixtynine</li>
<li>Seventy</li>
<li>Seventyone</li>
<li>Seventytwo</li>
<li>Seventythree</li>
<li>Seventyfour</li>
<li>Seventyfive</li>
<li>Seventysix</li>
<li>Seventyseven</li>
<li>Seventyeight</li>
<li>Seventynine</li>
<li>Eighty</li>
<li>Eightyone</li>
<li>Eightytwo</li>
<li>Eightythree</li>
<li>Eightyfour</li>
<li>Eightyfive</li>
<li>Eightysix</li>
<li>Eightyseven</li>
<li>Eightyeight</li>
<li>Eightynine</li>
<li>Ninety</li>
<li>Ninetyone</li>
<li>Ninetytwo</li>
<li>Ninetythree</li>
<li>Ninetyfour</li>
<li>Ninetyfive</li>
<li>Ninetysix</li>
<li>Ninetyseven</li>
<li>Ninetyeight</li>
<li>Ninetynine</li>
</ul>
</article>
</div>
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>
4、书写css代码。
.cards {
-webkit-perspective: 300px;
-moz-perspective: 300px;
-ms-perspective: 300px;
-o-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.cards li {
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.cards li.past {
-webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
-moz-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
-ms-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
-o-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
transform: translate3d( 0, -100px, -100px ) rotateX( -90deg );
}
.cards li.future {
-webkit-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
-moz-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
-ms-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
-o-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
transform: translate3d( 0, 100px, -100px ) rotateX( 90deg );
}
5、代码整体结构。
6、查看效果。
