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

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

back
front

 

 

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

    a. 外容器 box

    b. 内容器 border

    c. 默认显示内容 front

    d. 滑动内容 back

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

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>

 

大功告成。

 

 

你可能感兴趣的:(html5)