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

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

一、页面的主体布局

<!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. Codeforces 597B Restaurant（离散化 + 贪心）

    题目链接 Restaurant 题目意思就是在$n$个区间内选出尽可能多的区间,使得这些区间互不相交. 我们先对这$n$个区间去重. 假如有两个区间$[l1, r1],[l2, r2]$ 若满足$l1 ...

  2. codevs——1008 选数

    1008 选数 2002年NOIP全国联赛普及组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 已知 n ...

  3. 缓存区溢出检测工具BED

    缓存区溢出检测工具BED   缓存区溢出(Buffer Overflow)是一类常见的漏洞,广泛存在于各种操作系统和软件中.利用缓存区溢出漏洞进行攻击,会导致程序运行失败.系统崩溃.渗透测试人员利用这 ...

  4. P2P技术简介（包括BT软件的分析）（转）

    这是一篇别人发表的论文,里面很全面的解释了P2P技术的实现,以及BT网络中应用P2P技术所设计的原理,并列举BT软件的一些专业名词的定义.由于论文发表的比较早,2005年时还没有DHT技术. (链接: ...

  5. 【windows】windows下的hosts文件位置

  6. POJ 1017 Packets(积累)

    [题意简述]:这个是别人的博客,有清晰的题意描写叙述.和解题思路,借助他的想法,能够非常好的解决问题! [分析]:贪心?模拟?见代码 //216K 16Ms #include<iostream& ...

  7. Hibernate调试——定位查询源头

    本文是我在importNew翻译的文章,首发在importNew,这里会定期更新链接. 为什么有时Hibernate会在程序某一部分生成一条指定sql查询?这个问题让人非常难立马理解.当处理不是我们本 ...

  8. IntelliJ IDEA 10.5.1 引用外部Jar包

    具体步骤: File -> Project Structure (ctrl + shift + alt + s ) -> Module -> Dependencies -> A ...

  9. Android 设定横屏，禁止屏幕旋转，Activity重置 [更新视频播放器相关]

    1. 设定屏幕方向 当指定了屏幕的方向后(非SCREEN_ORIENTATION_UNSPECIFIED),屏幕就不会自己主动的旋转了 有2中方式控制屏幕方向: 1.1 改动AndroidManife ...

  10. angular - 使用es6等一些功能

    app.module.ts var model = { user: 'Admin', items: [{ action: 'buy flowsers', done: false },{ action: ...