CSS - Statusmeldung nach 5 Sekunden ausblenden

Eine Statusmeldung

<style>

/* Statusmeldung nach 5 Sekunden ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div class="success">Eine Statusmeldung</div>

Statusmeldung je nach Nachricht ausblenden (mit JavaScript)


<style>

/* Statusmeldung je nach Nachricht ausblenden */

.success {
 
background-color#e3ffe3;
 
bordersolid 2px #00b700;
 
text-aligncenter;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 5s ease forwards;
}

.
error {
 
background-color#ffd5d5;
 
bordersolid 2px #ff4d4d;
 
color#000000;
 
padding10px;
 
width250px;
 
animationstatus 10s ease forwards;
}

@
keyframes status {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
div id="message"></div>

<
script>
let message document.querySelector('#message');

if (
"Inhalt" == "Inhalt") {
 
message.textContent = `Die Inhalte sind gleich.`;
 
message.classList.add("success");
}
else {
 
message.textContent = `Die Inhalte sind ungleich!`;
 
message.classList.add("error");
}
</
script>

Pop-up nach 10 Sekunden ausblenden


<style>

/* Pop-up nach 10 Sekunden ausblenden */

div#popup {
 
font-familyVerdanaArialSans-Serif;
 
font-size1rem;
 
color#000000;
 
background-color#FFD700;
 
bordersolid 2px #000000;
 
text-aligncenter;
 
padding5px;
 
width250px/* Breite */
 
height270px/* Höhe */
 
positionabsolute;
 
left100px/* Position von Links */
 
top90px/* Position von Oben */
 
z-index1000;
 
box-shadow0px 0px 7px 6px #BBBBBB;
 
animationpopUp 10s ease forwards;
}

@
keyframes popUp {
 
0% {
  
opacity1;
  
pointer-eventsall;
 }
 
90% {
  
opacity1;
  
pointer-eventsall;
 }
 
100% {
  
opacity0;
  
pointer-eventsnone;
 }
}
</
style>

<
p>Test!</p>

<
div id="popup">
 
Text und oder Bild
</div>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<small> Physische Auszeichnung

CSS - Markieren von Text verhindern

PHP - Dateigröße und letzte Aktualisierung

JavaScript - Individuelle Fehlermeldung ausgeben

MySQL - Datensätze einer Tabelle zählen

Aktualität vortäuschen
Viele Seiten werben mit "aktuellen News", die in Wirklichkeit Wochen alt sind. Wenn man aktuelle News verspricht, dann sollte man diese auch bieten, ansonsten sollte man lieber darauf verzichten.