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 <p class="box1">
2 <p class="border1">
3 <p class="back1">back</p>
4 <p class="front1">front</p>
5 </p>
6 </p>
复制代码
