CSS3+HTML5特效1 - 上下滑动效果
浏览数：25 /
时间：2015年06月09日
先看看效果，把鼠标移上去看看。
back
front
1. 本实例需要以下元素：
a. 外容器 box
b. 内容器 border
c. 默认显示内容 front
d. 滑动内容 back
2. 外容器BOX的Height为200px，Width为200px；
1 .box1{ 2 position: relative; 3 top: 100px; 4 left: 100px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }
3. 内容器BORDER的Height为200%，Width为100%，Top为-100%；
1 .border1{ 2 position: absolute; 3 top: -100%; 4 left: 0px; 5 width: 100%; 6 height: 200%; 7 -webkit-transform: translateY(0px); 8 transform: translateY(0px); 9 -webkit-transition:1s all ease; 10 transition:1s all ease; 11 }
4. 需要显示的2个元素，Height为50%，Width为100%；
1 .front1{ 2 width: 100%; 3 height: 50%; 4 background: #ff0000; 5 } 6 7 .back1{ 8 width: 100%; 9 height: 50%; 10 background: #00ff00; 11 }
5. 加入鼠标移入效果，鼠标移入后内容器BORDER向下移动50%，就将滑动内容BACK显示出来，将原内容FRONT滑动隐藏；
1 .box1:hover .border1{ 2 -webkit-transform: translateY(50%); 3 transform: translateY(50%); 4 -webkit-transition:1s all ease; 5 transition:1s all ease; 6 }
6. 页面内容
1 <div class="box1"> 2 <div class="border1"> 3 <div class="back1">back</div> 4 <div class="front1">front</div> 5 </div> 6 </div>
大功告成。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
