Home > Article > Web Front-end > How to implement the special effect of showing and hiding a div using css3
How to implement the special effect of showing and hiding a div using css3
- 不言Original
- 2018-06-21 15:48:003748browse
This article mainly introduces how to use css3 to display and hide a div special effect. It has a certain reference value. Now I share it with you. Friends in need can refer to it.
Display and hide a p special effect There are many methods. The following is an introduction to how to achieve it using pure css3. Interested friends can refer to
<!DOCTYPE HTML>
<head>
<script src="jquery-1.8.2.min.js"></script>
<style>
#showp {
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(){
$("#showp").show();
$("#showp").addClass("from-below");
setTimeout(function(){$("#showp").addClass("effeckt-show");},300);
}
function hide(){
$("#showp").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()">
<p id="showp" class="">
<h1>aaaaa</h1>
</p>
</body>. The above is the entire content of this article. I hope it will be helpful to everyone's learning. More related Please pay attention to the PHP Chinese website for content!
The above is the detailed content of How to implement the special effect of showing and hiding a div using css3. For more information, please follow other related articles on the PHP Chinese website!