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

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

一、页面的主体布局

<!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 1552: [Cerc2007]robotic sort

    1552: [Cerc2007]robotic sort Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1198  Solved: 457[Submit] ...

  2. Java中泛型T和Class<T>以及Class<?>的理解(转)

    注意:class是java的关键字, 在声明Java类时使用; Class类的实例表示Java应用运行时的类(class ans enum)或接口(interface and annotation)( ...

  3. Linux 端口防火墙

    举例: 开放10000端口的解决步骤如下: 1.修改/etc/sysconfig/iptables文件,增加如下一行: -A RH-Firewall-1-INPUT -m state --state ...

  4. 3.环境搭建-Hadoop(CDH)集群搭建

    目录 目录 实验环境 安装 Hadoop 配置文件 在另外两台虚拟机上搭建hadoop 启动hdfs集群 启动yarn集群 本文主要是在上节CentOS集群基础上搭建Hadoop集群. 实验环境 Ha ...

  5. 手动安装pip

    apt-get instal pip  成功之后,有根据pip的提示,进行了升级,升级之后,pip就出问题了 为了解决上面问题,手动安装pip,依次执行下面命令 1 2 3 4 5 [root@min ...

  6. Vue 字面量语法 vs 动态语法

    初学者常犯的一个错误是使用字面量语法传递数值: <!-- 传递了一个字符串 "1" --> <comp some-prop="1">&l ...

  7. 利用display属性写出表格的布局样式

    demo地址:http://codepen.io/tianzi77/pen/gpBzjy 元素结构: <h1>display构造的table小样例,IE8及下面浏览器不支持本演示样例< ...

  8. 【LeetCode】Word Break 解题报告

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...

  9. VC++的project文件

    VC++的project文件说明: *.dsp:是VC++的项目文件,文本格式. *.dsw:是工作区文件,它能够指向一个或多个.dsp文件. *.clw:是 ClassWizard信息文件,实际上是 ...

  10. DDR 布线规则

    https://blog.csdn.net/cpf099/article/details/52038862 https://blog.csdn.net/cpf099/article/details/5 ...