纯css3显示隐藏一个div特效的具体实现


Posted in HTML / CSS onFebruary 10, 2014

复制代码
代码如下:

<!DOCTYPE HTML>
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>
#showDiv {
background-color:red;
width:300px;
height:300px;
display:none;
}
.from-below,
.from-below-to-below .effeckt-modal {
-webkit-transform: translateX(100%);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-transition: all 500ms;
-o-transition: 500ms;
transition: 500ms;
}
.effeckt-show,
.effeckt-show.from-below-to-below .effeckt-modal {
-webkit-transform: translateX(0);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.effeckt-show .effeckt-modal {
visibility: visible;
}
</style>
<script>
function show(){
$("#showDiv").show();
$("#showDiv").addClass("from-below");
setTimeout(function(){$("#showDiv").addClass("effeckt-show");},300);
}
function hide(){
$("#showDiv").removeClass("effeckt-show");
}
</script>
</head>
<body class="sapUiBody">
<input type="button" id="bt" value="show" onClick="show()">
<input type="button" id="bt" value="hide" onClick="hide()">
<div id="showDiv" class="">
<h1>aaaaa</h1>
</div>
</body>
HTML / CSS 相关文章推荐
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
Mar 07 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
May 04 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 #HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 #HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 #HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 #HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
You might like
漂亮但不安全的CTB
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php加密解密字符串示例
2016/10/13 PHP
javascript document.referrer 用法
2009/04/30 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
electron中使用bootstrap的示例代码
2018/11/06 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
为什么称python为胶水语言
2020/06/16 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
清洁工表扬信
2014/01/08 职场文书
建议书标准格式
2014/03/12 职场文书
承诺书怎么写
2014/03/26 职场文书
员工薪酬激励方案
2014/06/13 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
技术股东合作协议书
2014/12/02 职场文书
英文辞职信范文
2015/05/13 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA