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

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

一、页面的主体布局

  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. android studio C/C++ jni 编写以及调试方法

    原文路径: http://blog.sina.com.cn/s/blog_ad64b8200102vnxl.html 目录 开发环境 2 编写hello_jni程序 2 运行结果 10 调试程序 10 ...

  2. mysql 存储过程时间月份减法

    declare startTime VARCHAR(19) default '2014-00-00 00:00:00'; declare tempTime VARCHAR(19) default NO ...

  3. 全方位绕过软WAF攻略

    0×00 前言 现在软waf较为多,就在今年夏天苦逼挖洞的日子里经常遇到360主机卫士,安全狗,云锁之类的软waf进行拦截,经常碰到如下拦截提示: 看到以上三个拦截提示就让人头疼不已,欲罢不能. so ...

  4. Sublime Text 2搭建Go开发环境

    Sublime Text 2搭建Go开发环境,代码提示+补全+调试 cceevv · 2014-10-11 00:00:06 · 10496 次点击 · 预计阅读时间 3 分钟 · 5分钟之前 开始浏 ...

  5. Mysql的四种key

    我们看到Key那一栏,可能会有4种值,即 '','PRI','UNI','MUL'1. 如果Key是空的, 那么该列值的可以重复, 表示该列没有索引, 或者是一个非唯一的复合索引的非前导列2. 如果K ...

  6. POJ2386 Lake Counting 【DFS】

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20782   Accepted: 10473 D ...

  7. d3js 获取元素以及设置属性

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 最长连续序列(Longest Consecutive Sequence)

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  9. Tachyon源代码结构分析（二）

    公布人:南京大学PASA大数据实验室顾荣 前言 在上一篇<Tachyon源代码结构分析(一)>中,我们介绍了Tachyon的四大模块(Client模块.Master模块.Worker模块以 ...

  10. bat+sqlcmd 批量执行脚本

    Hello,此BAT脚本能够帮助开发者将某目录下全部SQL脚本按文件名称依次在指定数据库中批量执行. 不用忍受powershell invoke-sqlcmd 的笨重.在指执行时多一种选择. bat文 ...