Heim > Artikel > Web-Frontend > Beispiel-Tutorial zum Ein- und Ausblenden von Divs mit CSS3

Beispiel-Tutorial zum Ein- und Ausblenden von Divs mit CSS3

Y2JOriginal: 2017-05-24 10:45:443235Durchsuche

Es gibt viele Möglichkeiten, einen p-Spezialeffekt ein- und auszublenden. Im Folgenden finden Sie eine Einführung, wie Sie dies mit reinem CSS3 erreichen können.

Der Code lautet wie folgt:

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

[Verwandte Empfehlungen]

1. Kostenloses CSS3-Video-Tutorial

2. Detaillierte Erläuterung der Inhaltsattributbeispiele in CSS3

3. Detaillierte Erklärung der 10 Top-Befehle in CSS3

4. Kurze Beschreibung, wie Webdesigner die CSS3-Technologie gut nutzen können

5. Css3 zum Erstellen von Mouseover-Button-Effekten

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zum Ein- und Ausblenden von Divs mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3 zum Erstellen von Mouseover-Button-EffektenNächster Artikel：CSS3 zum Erstellen von Mouseover-Button-Effekten

In Verbindung stehende Artikel

Mehr sehen