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

当前位置 : 首页 > 网页制作 > CSS > CSS3+HTML5特效1 - 上下滑动效果

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

来源: 作者: 时间:2016-01-28 09:27
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>
复制代码
Tag:
上一篇:CSS整理
下一篇:Bootstrap按钮菜单
网友评论

<