最近写了一个动画,下面来看看我以前写的一个上下滑动展开的按钮效果:

这类的效果经常会在一些网站页面下载按钮处看到,当你鼠标悬浮在下载按钮时,会提醒你是否已注册,或者点击登录什么的小提示~~~~~

一、页面的主体布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <link type="text/css" rel="stylesheet" href="css/both_slid_menu.css" />
  7. </head>
  8. <body>
  9. <div class="both_sild_menu">
  10. <div class="sild_top">我是上面</div>
  11. <a href="#" target="_blank">鼠标放在我上面试试</a>
  12. <div class="sild_bottom">我是下面</div>
  13. </div>
  14. </body>
  15. </html>

布局就不多说了,很简单.

二、CSS样式(主要是CSS3)

先说一下动画的原理:

(1)先来布局,我是将三个DIV并列排出来,如下图:

(2)把sild_top和sild_bottom的两个子级按钮置于a标签按钮的下方,用定位里面的z-index属性

(3)然后sild_top和sild_bottom的两个子级按钮进行位移到a标签按钮正下方

(4)为sild_top和sild_bottom的两个子级按钮设置动画

  1. .both_sild_menu{
  2. text-align: center;
  3. width: 300px;
  4. }
  5. .both_sild_menu .sild_top{
  6. text-decoration: none;
  7. padding: 10px;
  8. background-color: #6c987e;
  9. border-radius: 10px 10px 0 0;
  10.  
  11. /*让它的位置在名为both_sild_menu a的底部,且隐藏起来*/
  12. transform: translate(0,40px);
  13. opacity: 0; /*置于底部后再让它透明度为0,不显示*/
  14. position: relative;
  15. z-index: 1;
  16. }
  17. .both_sild_menu a{
  18. display: block;
  19. text-decoration: none;
  20. padding: 10px;
  21. background-color: #7eedaa;
  22. position: relative;
  23. z-index: 2; /*让它的位置在顶部*/
  24. }
  25. .both_sild_menu .sild_bottom{
  26. text-decoration: none;
  27. padding: 10px;
  28. background-color: #6c987e;
  29. border-radius: 0 0 10px 10px;
  30.  
  31. /*让它的位置在名为both_sild_menu a的底部,且隐藏起来*/
  32. opacity: 0;
  33. transform: translate(0,-40px);
  34. position: relative;
  35. z-index: 1;
  36.  
  37. }
  38. .both_sild_menu .sild_top,.both_sild_menu .sild_bottom{ /*给两个DIV设置动画的属性*/
  39. transition: all 0.2s ease-in-out 0s;
  40. -moz-transition: all 0.2s ease-in-out 0s;
  41. -ms-transition: all 0.2s ease-in-out 0s;
  42. -o-transition: all 0.2s ease-in-out 0s;
  43. -webkit-transition: all 0.2s ease-in-out 0s;
  44. }
  45.  
  46. /*名为sild_top的div动画效果设置开始*/
  47. .both_sild_menu:hover .sild_top{ /*当鼠标悬浮在框架上时,将名为sild_top的div透明度变为1*/
  48. opacity: 1;
  49. }
  50. .both_sild_menu:hover .sild_top{ /*当鼠标悬浮在框架上时,将名为sild_top的div从初始的Y轴40px移动到Y轴0px位置*/
  51. transform: translate(0,0);
  52. -moz-transform: translate(0,0);
  53. -o-transform: translate(0,0);
  54. -ms-transform: translate(0,0);
  55. -webkit-transform: translate(0,0);
  56. }
  57. /*名为sild_top的div动画效果设置结束*/
  58.  
  59. /*名为sild_bottom的div动效果设置画开始*/
  60. .both_sild_menu:hover .sild_bottom{
  61. opacity: 1;
  62. }
  63. .both_sild_menu:hover .sild_bottom{
  64. transform: translate(0,0);
  65. -moz-transform: translate(0,0);
  66. -o-transform: translate(0,0);
  67. -ms-transform: translate(0,0);
  68. -webkit-transform: translate(0,0);
  69. }
  70. /*名为sild_bottom的div动画效果设置结束*/

原理我已经说的很清楚了,配合上面的程序应该很容易看出来吧.

CSS3学习笔记(4)—上下滑动展开的按钮的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. cell左右滑动展开更多按钮-MGSwipeTableCell

    MGSwipeTableCell是一个UITableViewCell的子类, 它实现了左,右滑动展开更多按钮用来实现一些相关操作就和QQ好友列表滑动展开的按钮一样,封装的很好,动画效果也处理很到位,废 ...

  3. CSS3学习笔记之径向展开菜单

    效果截图: HTML代码: <div class="menu-wrap"> <nav> <a href="" class=&quo ...

  4. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. html5和css3学习笔记

    HTML5针对移动端,移动端的浏览器主要是chrome,是webkit内核; app(applicatin):应用; native app:原生的app sadsadsadad 单标签可以省略结尾标记 ...

  7. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  8. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  9. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

随机推荐

  1. 一次完整的http请求过程以及网络I/O模型select、epoll

    a.一次完整的http请求过程 1.域名解析,得到域名对应的IP; 2.三次握手,客户端与服务器通过socket建立TCP/IP连接; 3.浏览器向服务器发送http请求,如:GET/index.ht ...

  2. codeforces A. In Search of an Easy Problem

    A. In Search of an Easy Problem time limit per test 1 second memory limit per test 256 megabytes inp ...

  3. Spring Cloud服务的注册与发现

    Spring Cloud简介: Spring Cloud为开发人员提供了快速构建分布式系统中的一些通用模式(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举,分 ...

  4. HDU5618 Jam's problem again

    CDQ分治模板题 #include<cstdio> #include<cctype> #include<algorithm> #include<cstring ...

  5. Android:MVC模式(上)

    很多Android的入门书籍,在前面介绍完布局后就会逐个介绍组件,然后开始编写组件使用的例子.每每到此时小伙伴们都可能会有些疑问:是否应该先啃完一本<Java编程思想>学点 Java 知识 ...

  6. JavaScript 推断浏览器类型及32位64位

    JS推断出版本号以及浏览器类型 <script type="text/javascript"> var Sys = {}; var ua = navigator.use ...

  7. 阿里巴巴为什么主推HSF?比Dubbo有哪些优势?

    作者:匿名用户链接:https://www.zhihu.com/question/39560697/answer/187538165来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  8. 求助大神!怎样除去XML节点反复的值的数据

    <?xml version="1.0" encoding="utf-8"? > <UpdCfg> <Upgrade> < ...

  9. nodejs REPL(交互式解释器)

    Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux ...

  10. VS中 build,rebuild,clean

    一般来说Rebuild=99%*(Clean+Build),效果在非常小的可能性下会不同,一般可以忽略. Rebuild是对Solution下的所有项目,逐个进行 Clean+Build.不论文件更改 ...