CSS3+HTML5特效1 - 上下滑动效果 - html/css语言栏目：

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> 复制代码