您的位置:阿里西西 > 前端技术 > HTML5教程 > 详细内容

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

  本站整理   互联网   2014-03-11   点击:   我要评论

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

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>
 

大功告成。



更多关于 的文章
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行