Example tutorial of showing and hiding divs with css3-CSS Tutorial-php.cn

Example tutorial of showing and hiding divs with css3

Y2J

Release： 2017-05-24 10:45:44

Original

3301 people have browsed it

There are many ways to show and hide a p special effect. The following is an introduction to how to implement it using pure CSS3. Interested friends can refer to the

The code is as follows:

<!DOCTYPE HTML> 
<head> 
<script src="
jquery
-1.8.2.min.
js
"></script> 
<style> 
#showp { 
background-color
:red; 
width
:
300
px; 
height
:300px; 
display
:none; 
} 
.from-below, 
.from-below-to-below .effeckt-modal { 
-webkit-trans
for
m: 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").add
Class
("from-below"); 
set
Time
out(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>

Copy after login

[ Related recommendations】

1. CSS3 free video tutorial

2. Detailed explanation of examples of content attribute in CSS3

3 . Detailed explanation of the 10 top commands in CSS3

4. Brief description of how web designers can use CSS3 technology well

5. css3 Create mouse over button effects

The above is the detailed content of Example tutorial of showing and hiding divs with css3. For more information, please follow other related articles on the PHP Chinese website!