Maison > Article > interface Web > Exemple de tutoriel pour afficher et masquer des divs avec CSS3

Exemple de tutoriel pour afficher et masquer des divs avec CSS3

Y2Joriginal: 2017-05-24 10:45:443235parcourir

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：CSS3 pour créer des effets de survol de la sourisArticle suivant：CSS3 pour créer des effets de survol de la souris

Articles Liés

Voir plus