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

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

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>

 

大功告成。