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