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:443260parcourir
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
5.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