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

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

一、页面的主体布局

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link type="text/css" rel="stylesheet" href="css/both_slid_menu.css" />

    </head>

    <body>

        <div class="both_sild_menu">

            <div class="sild_top">我是上面</div>

            <a href="#" target="_blank">鼠标放在我上面试试</a>

            <div class="sild_bottom">我是下面</div>

        </div>

    </body>

</html>

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

二、CSS样式（主要是CSS3）

先说一下动画的原理：

（1）先来布局，我是将三个DIV并列排出来，如下图：

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

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

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

.both_sild_menu{

    text-align: center;

    width: 300px;

}

.both_sild_menu .sild_top{

    text-decoration: none;

    padding: 10px;

    background-color: #6c987e;

    border-radius: 10px 10px 0 0;  

    /*让它的位置在名为both_sild_menu a的底部，且隐藏起来*/

    transform: translate(0,40px);

    opacity: 0;                   /*置于底部后再让它透明度为0，不显示*/

    position: relative;

    z-index: 1;

}

.both_sild_menu a{

    display: block;

    text-decoration: none;

    padding: 10px;

    background-color: #7eedaa;

    position: relative;

    z-index: 2;    /*让它的位置在顶部*/

}

.both_sild_menu .sild_bottom{

    text-decoration: none;

    padding: 10px;

    background-color: #6c987e;

    border-radius: 0 0 10px 10px;

    /*让它的位置在名为both_sild_menu a的底部，且隐藏起来*/

    opacity: 0;

    transform: translate(0,-40px);

    position: relative;

    z-index: 1;

}

.both_sild_menu .sild_top,.both_sild_menu .sild_bottom{      /*给两个DIV设置动画的属性*/

    transition: all 0.2s ease-in-out 0s;

    -moz-transition: all 0.2s ease-in-out 0s;

    -ms-transition: all 0.2s ease-in-out 0s;

    -o-transition: all 0.2s ease-in-out 0s;

    -webkit-transition: all 0.2s ease-in-out 0s;

}

/*名为sild_top的div动画效果设置开始*/

.both_sild_menu:hover .sild_top{               /*当鼠标悬浮在框架上时，将名为sild_top的div透明度变为1*/

    opacity: 1;

}

.both_sild_menu:hover .sild_top{                /*当鼠标悬浮在框架上时，将名为sild_top的div从初始的Y轴40px移动到Y轴0px位置*/

    transform: translate(0,0);

    -moz-transform: translate(0,0);

    -o-transform: translate(0,0);

    -ms-transform: translate(0,0);

    -webkit-transform: translate(0,0);

}

/*名为sild_top的div动画效果设置结束*/

/*名为sild_bottom的div动效果设置画开始*/

.both_sild_menu:hover .sild_bottom{

    opacity: 1;

}

.both_sild_menu:hover .sild_bottom{

    transform: translate(0,0);

    -moz-transform: translate(0,0);

    -o-transform: translate(0,0);

    -ms-transform: translate(0,0);

    -webkit-transform: translate(0,0);

}

/*名为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. BZOJ 4568 [Scoi2016]幸运数字（树链剖分 + 异或线性基）

    题目链接  BZOJ 4568 考虑树链剖分+线段树维护每一段区域的异或线性基 对于每个询问,求出该点集的异或线性基.然后求一下这个线性基里面能异或出的最大值即可. #include <bits ...

  2. [原创][FPGA]Quartus中调用Modelsim波形仿真步骤说明

    0. 简介 在使用QuartusII软件的过程中,经常地需要跑仿真,那么说到仿真就不得不说Modelsim这个仿真软件了,我们这里介绍下该软件在QuartusII中的使用方法. 1. 建立Quartu ...

  3. git 撤回上一次commit中某一个不想添加的文件

    1. 假设我们修改了文件a,同时修改了IDE的配置文件b 2.此时我们只想添加文件a到commit中,却不小心将b也添加进去了 3.那么怎么撤回呢? 4.第一种方法 :重新提交commit 5. 第二 ...

  4. 布斯（Steve Jobs）在斯坦福大学的演讲稿，中英文对照版

    2005年6月14日,苹果CEO史蒂夫·乔布斯(Steve Jobs)在他的母校斯坦福大学的毕业典礼发表了著名的演讲,关于这段演讲,你会看到N多人的推荐(比如同样喜欢在大学演讲的李开复先生).此前曾经 ...

  5. 【java】google的zxing架包生成二维码和读取二维码【可带文字和logo】

    承接RC4生成不重复字符串的需求之后,因为优惠码要方便用户使用的缘故,所以思来想去,觉得还是直接生成二维码给用户直接扫比较实用,也不用用户专门记录冗长的优惠码编号. ================= ...

  6. windows10 安装 mysql 5.6 教程

    首先是下载 mysql-installer-community-5.6.14.0.msi ,大家可以到 mysql 官方网去下载. win10的安全机制比较严格,安装前最好到<设置>--& ...

  7. cygwin搭建ssh服务器

    下载cygwin的setup.exe安装包

  8. 控制CUP占用率曲线

    在<编程之美>上看过一道面试题就是要求:输出cup占用率的曲线图 今天看到了一篇文章就试试看看: #include <iostream> #include <cmath& ...

  9. 数据库 ""和null的在java 持久化中的区别

    如果查找的时候查找了dealerCarType中a字段,但是数据库中a字段为"",那么持久化结果dealerCarType.getA() 结果为""; 如果查找 ...

  10. SASS入门之SASS安装

    当然...凭借我这样的肤浅的智商,根本不能理解什么叫certificate verfiy fail... 所以找了一段时间的方法,最后最终在一个sass群里找到了... 发在这里纯属作为自己的一个学习 ...