CSS - Kompass-Animation
<style>
div#kompass {
width: 313px;
height: 313px;
margin: Auto;
background: url("kompass.webp"), radial-gradient(circle, #3DB7FF 10%, #FFFFFF 84%);
border-radius: 100%;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.7);
}
div#nadel {
width: 313px;
height: 313px;
margin: Auto;
background-image: url("nadel.webp");
filter: drop-shadow(0px 0px 5px rgba(70, 70, 70,0.8));
margin-top: -313px;
animation: Nadel 3.8s ease-in-out infinite alternate;
}
div#nadel:hover {
animation-play-state: paused;
}
@keyframes Nadel{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="kompass"></div>
<div id="nadel"></div>
Verwendete Grafiken:


Bausteine Alle Anzeigen
Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Externe URL des Hyperlinks sichtbar machen
PHP - Koordinaten einer Grafik anzeigen
JavaScript - Ausgabe des aktuellen Datums mit Monats- und Tagesnamen