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

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

一、页面的主体布局

<!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. (5)Unity3d GUI

  2. 洛谷——P1825 [USACO11OPEN]玉米田迷宫Corn Maze

    P1825 [USACO11OPEN]玉米田迷宫Corn Maze 题目描述 This past fall, Farmer John took the cows to visit a corn maz ...

  3. commons-lang3-RandomUtils

    随机工具类   RandomUtils nextBoolean() 返回一个随机boolean值 nextBytes(int count) 返回一个指定大小的随机byte数组 nextDouble() ...

  4. PyTorch学习问题记录

    Q1:def train() 中的model.train()的作用是什么?为什么要写? A1:class torch.nn.Module中 train(mode=True) Sets the modu ...

  5. MySQL中limit使用动态参数的解决方法（拼接SQL字符串语句来执行SQL）

    官方好像说过limit已经在5.6版本上支持了动态参数,但是测试时依然还是不行. 那么要解决limit动态参数唯一能做的就是使用字符串SQL拼接的形式,然后再进行执行. 一般有以下方式解决: 1.存储 ...

  6. openfire Android学习（一）----实现用户注册、登录、修改密码和注销等

    以前学习过用Scoket 建立聊天,简单的建立聊天是没问题的,但如果要实现多人复杂的聊天,后台服务器代码就比较复杂,对于我这新手来讲就比较难了.后来在网上看到用openfire做服务器,利用强大的Sm ...

  7. 【grpc】spring boot+grpc的使用

    spring boot+grpc的使用 参考:https://baijiahao.baidu.com/s?id=1573961922096412&wfr=spider&for=pc

  8. 使用正則表達式对URL进行解析

    对URL进行解析,一般用到的參数有: 1.协议 如http,https 2.域名或IP 3.port号,如7001,8080 4.Web上下文 5.URI.请求资源地址 6.请求參数 一个URL演示样 ...

  9. ThinkPHP学习（五）图片验证码

    今天用到图片验证码的功能,在网上找到ThinkPHP的下面代码: Public function verify(){ import('think.Image'); Image::buildImageV ...

  10. flex 节点删除

    <mx:Script>        <![CDATA[            protected function btn1_clickHandler(evt:MouseEvent ...