纯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 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
解决HTML5手机端页面缩放的问题
Oct 27 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
几款流行的HTML5 UI框架比较(小结)
Apr 08 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
用Div仿showModalDialog模式菜单的效果的代码
2007/03/05 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
Python Queue模块详解
2014/11/30 Python
window下eclipse安装python插件教程
2017/04/24 Python
Python队列的定义与使用方法示例
2017/06/24 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
scrapy-redis源码分析之发送POST请求详解
2019/05/15 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
超市总经理岗位职责
2014/02/02 职场文书
公司晚会主持词
2019/04/17 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
Java的Object类的九种方法
2022/04/13 Java/Android