当前位置:首页 > 开发 > Web前端 > Html5 > 正文

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

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
摘要: 先看看效果,把鼠标移上去看看。 back front     1. 本实例需要以下元素:     a. 外容器 box     b. 内容器 border     c. 默认显示内容 front     d. 滑动内容 back 2. 外容器BOX的Height为

先看看效果,把鼠标移上去看看。

back
front

 

 

1. 本实例需要以下元素:

    a. 外容器 box

    b. 内容器 border

    c. 默认显示内容 front

    d. 滑动内容 back

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

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>

 

大功告成。

 

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
这几天,都在无所事事,唯一寄托就是在这里记录一下自己研究出来的东西。趁现在有点时间,就把最近
flash特效原理:图片滑动放大效果(1) http://blog.csdn.net/hero82748274/archive/2009/10/22/47153
在之前制作的版本,由于没有引入缓冲的效果,看起来效果并不好,这一次修改一下,把之前的改造一下
基于HTML5手机上下滑动翻页特效。这是一款手机移动端触屏滑动翻页代码下载。效果图如下: 在线预览
这段代码实现类似水果忍者应用中,用户手指在屏幕上划动时出现划痕轨迹的效果,有兴趣的朋友可以研
原文: CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一
效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏); 使用checkbox作为判
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8714621 人人客户端有一个特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8714621 人人客户端有一个特效
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8714621 人人客户端有一个特效
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号