CSS - Bild mit Impuls

<style>

@keyframes schatten-impuls {

  0% {

    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);

  }

  100% {

    box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);

  }

}



.beispiel {

 display: inline-block;

}



.beispiel:hover {

 animation: schatten-impuls 1s infinite;

}




div.zentriert {

 font-size: 0px;

 width: 444px;

 margin: Auto;

}

</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!):

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.

<aside> Nebeninhalt

CSS - Transparenter Farbverlauf

PHP - Level-Anzeige mit PHP und CSS

JavaScript - Link mit Ajax aufrufen

MySQL - Datensätze auswählen