来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 1 本实例需要以下元素： a 外容器 box b 内容器 border c 默认显示内容 front d 滑动内容 back2 外容器BOX的Height为200px，Width为200px；复制代码1 box1{2 position: relat...
|
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>
复制代码
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
