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>

 

大功告成。