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.

<bdo> Textrichtung

CSS - Internes Sprungziel hervorheben

PHP - Neueste Datei in einem Verzeichnis anzeigen

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Eintrag in der Tabelle löschen