純css3顯示隱藏一個(gè)div特效的具體實(shí)現(xiàn)
發(fā)布時(shí)間：2014-02-10 16:25:02 作者：佚名 
我要評(píng)論
我要評(píng)論顯示隱藏一個(gè)div特效的方法有很多，下為大家介紹下使用純css3是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下
復(fù)制代碼
代碼如下:<!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>
相關(guān)文章
- div居中的使用還是比較廣泛的，在本文有個(gè)不錯(cuò)的示例，可以幫助大家更好的理解div居中顯示，感興趣的朋友不要錯(cuò)過(guò)2013-10-05
CSS設(shè)置DIV背景色漸變顯示兼容IE/火狐/谷歌
DIV背景色漸變?cè)谝郧暗奈恼轮幸灿薪榻B過(guò)，但并沒(méi)有同時(shí)兼容IE、火狐、谷歌，而本文的這個(gè)示例卻可以同時(shí)兼容，建議喜歡的朋友參考下2013-09-30CSS實(shí)現(xiàn)帶箭頭的DIV(鼠標(biāo)放上顯示提示框)
畢業(yè)設(shè)計(jì)要做一個(gè)提示框：當(dāng)鼠標(biāo)放在某個(gè)鏈接上時(shí)，下邊顯示有提示功能的窗體，于是有了以下的構(gòu)思，有類(lèi)似需求的朋友可以參考下哈，希望本例對(duì)你有所幫助2013-04-12
純css3實(shí)現(xiàn)無(wú)圖片的div高亮顯示特效
純css3實(shí)現(xiàn)的div高亮顯示效果，無(wú)圖片，當(dāng)鼠標(biāo)放上去是會(huì)突出高亮顯示2013-02-27css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能，當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí)，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，這一點(diǎn)還是比較有利于用戶體驗(yàn)的，本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方2013-01-25css布局實(shí)例:網(wǎng)頁(yè)布局的方法
許多網(wǎng)頁(yè)設(shè)計(jì)師都喜歡，將兩個(gè)或者多個(gè)容器等高的并排放置，并在里面展示每個(gè)容器的內(nèi)容，就象經(jīng)典表格布局中的單元格控制幾個(gè)欄目的位置2008-10-17- 未隱藏之前與隱藏之后的效果顯而易見(jiàn)，在版面的美觀度上起到一定的作用，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-21
html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式
突然想起幾年前用過(guò)的一個(gè)隱藏樣式代碼，有些時(shí)候用它非常方便，比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到，那就加上他，嘿嘿，就隱身了,需要的朋友可以了解下2012-12-21CSS控制DIV層顯示和隱藏的實(shí)現(xiàn)方法
本文給大家?guī)?lái)了CSS控制DIV層顯示和隱藏的方法，是前端學(xué)習(xí)必須要掌握的基礎(chǔ)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的小伙伴一起學(xué)習(xí)吧2016-07-01
