纯css3显示隐藏一个div特效的具体实现
发布时间：2014-02-10 16:25:02 作者：佚名 
我要评论
我要评论显示隐藏一个div特效的方法有很多，下为大家介绍下使用纯css3是如何实现的，感兴趣的朋友可以参考下
复制代码
代码如下:<!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>
相关文章
- div居中的使用还是比较广泛的，在本文有个不错的示例，可以帮助大家更好的理解div居中显示，感兴趣的朋友不要错过2013-10-05
- DIV背景色渐变在以前的文章中也有介绍过，但并没有同时兼容IE、火狐、谷歌，而本文的这个示例却可以同时兼容，建议喜欢的朋友参考下2013-09-30
- 毕业设计要做一个提示框：当鼠标放在某个链接上时，下边显示有提示功能的窗体，于是有了以下的构思，有类似需求的朋友可以参考下哈，希望本例对你有所帮助2013-04-12
纯css3实现的div高亮显示效果，无图片，当鼠标放上去是会突出高亮显示2013-02-27- css实现div自动添加滚动条比较实用的功能，当图片或文字超出div所规定的宽或高时，会自动出现滚动条，这一点还是比较有利于用户体验的，本文整理了一些实现自动滚动条的方2013-01-25
- 许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置2008-10-17
- 未隐藏之前与隐藏之后的效果显而易见，在版面的美观度上起到一定的作用，具体实现代码如下，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-05-21
html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式
突然想起几年前用过的一个隐藏样式代码，有些时候用它非常方便，比如想让某块表格TABLE或者DIV里的内容完全看不到，那就加上他，嘿嘿，就隐身了,需要的朋友可以了解下2012-12-21- 本文给大家带来了CSS控制DIV层显示和隐藏的方法，是前端学习必须要掌握的基础知识，非常不错，具有参考借鉴价值，感兴趣的小伙伴一起学习吧2016-07-01
最新评论