Exemple de tutoriel pour afficher et masquer des divs avec CSS3-tutoriel CSS-php.cn

Exemple de tutoriel pour afficher et masquer des divs avec CSS3

Y2J

Libérer： 2017-05-24 10:45:44

original

3292 Les gens l'ont consulté

Il existe de nombreuses façons d'afficher et de masquer un effet spécial p. Ce qui suit est une introduction à la façon d'y parvenir en utilisant du CSS3 pur. Les amis intéressés peuvent se référer au

Le code est le suivant :

<!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>

Copier après la connexion

[Recommandations associées]

1. Tutoriel vidéo gratuit CSS3

2 Explication détaillée des exemples d'attributs de contenu en CSS3.

3. Explication détaillée des 10 principales commandes de CSS3

4 Brève description de la façon dont les concepteurs de sites Web peuvent bien utiliser la technologie CSS3

Css3 pour créer des effets de survol de la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!