CSS - Bild mit Impuls


<style>

@
keyframes schatten-impuls {
  
0% {
    
box-shadow0 0 0 0px rgba(0000.2);
  }
  
100% {
    
box-shadow0 0 0 35px rgba(0000);
  }
}

.
beispiel {
 
displayinline-block;
}

.
beispiel:hover {
 
animationschatten-impuls 1s infinite;
}

div.zentriert {
 
font-size0px;
 
width444px;
 
marginAuto;
}
</
style>

<
div class="zentriert">
 <
span class="beispiel"><img src="bild.png"></span>
</
div>

Valentinstag

<style>
/* Herz */
@keyframes heart {
  0% {
    filter: drop-shadow(0px 0px 0px Transparent);
  }
  100% {
    filter: drop-shadow(0px 0px 30px #FF0000);
  }
}

.beispiel {
 display: inline-block;
 animation: heart 2s 2s infinite alternate;
}

div.zentriert {
 font-size: 0px;
 width: 237px;
 margin: 50px Auto 50px Auto;
}
</style>

<div class="zentriert">
 <span class="beispiel"><img src="herz.png"></span>
</div>

Verwendete Grafik (weißes Herz!):

herz.png - 237 x 237 Pixel - 2.1 KB

Herzschlag - Heartbeat

Gefunden bei: mobirise-tutorials.com

💕
<style>
@keyframes heartbeat {
  0% {
    transform: scale(0.75);
  }
  20% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.75);
  }
  60% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(0.75);
  }
}

#mybeat {
 font-size: 10rem;
  position: absolute;
  margin: 10px Auto 50px Auto;
  left: 0;
  right: 0;
  width: 200px;
  height: 50px;
  animation: heartbeat 1s infinite;
}
</style>

<div id="mybeat">&#128149;</div>

Bausteine  Alle Anzeigen

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

<span> Allgemeines Inline-Element

CSS - Checkboxen und Radiobuttons farblich anpassen

PHP - Automatische Verlinkung

JavaScript - Ein farbig blinkender Text

MySQL - Spalte umbenennen

Webseiten in Planung
Je tiefer die Homepage konstruiert ist desto größer ist die Gefahr, dass der Besucher die Orientierung verliert. Daraus folgt, dass gleich bei der Planung darauf zu achten ist, mehr in die Breite als in die Tiefe zu strukturieren. Sorgfältige Planung ist das „A und O“ einer guten Homepage, diese entsteht nicht von heute auf Morgen.