CSS3+HTML5特效1 - 上下滑动效果

先看看效果，把鼠标移上去看看。

back

front

1. 本实例需要以下元素：

a. 外容器 box

b. 内容器 border

c. 默认显示内容 front

d. 滑动内容 back

2. 外容器BOX的Height为200px，Width为200px；

 .box1{
   position: relative;
   top: 100px;
   left: 100px;
   width: 200px;
   height: 200px;
   border: 1px solid #ccc;
   overflow: hidden;
 }

3. 内容器BORDER的Height为200%，Width为100%，Top为-100%；

 .border1{
   position: absolute;
   top: -100%;
   left: 0px;
   width: 100%;
   height: 200%;
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition:1s all ease;
   transition:1s all ease;
 }

4. 需要显示的2个元素，Height为50%，Width为100%；

 .front1{
   width: 100%;
   height: 50%;
   background: #ff0000;
 }

 .back1{
   width: 100%;
   height: 50%;
   background: #00ff00;
 }

5. 加入鼠标移入效果，鼠标移入后内容器BORDER向下移动50%，就将滑动内容BACK显示出来，将原内容FRONT滑动隐藏；

 .box1:hover .border1{
   -webkit-transform: translateY(50%);
   transform: translateY(50%);
   -webkit-transition:1s all ease;
   transition:1s all ease;
 }

6. 页面内容

 <div class="box1">
   <div class="border1">
     <div class="back1">back</div>
     <div class="front1">front</div>
   </div>
 </div>

大功告成。