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>

大功告成。