CSS - Kompass-Animation


<style>

div#kompass {
 
width313px;
 
height313px;
 
marginAuto;
 
backgroundurl("kompass.webp"), radial-gradient(circle#3DB7FF 10%, #FFFFFF 84%);
 
border-radius100%;
 
box-shadow0px 0px 10px 0px rgba(0,0,0,0.7);
}

div#nadel {
 
width313px;
 
height313px;
 
marginAuto;
 
background-imageurl("nadel.webp");
 
filterdrop-shadow(0px 0px 5px rgba(707070,0.8));
 
margin-top: -313px;
 
animationNadel 3.8s ease-in-out infinite alternate;
}

div#nadel:hover {
 
animation-play-statepaused;
}

@
keyframes Nadel {
 
0% {
  
transformrotate(0deg);
 }
 
100% {
  
transformrotate(360deg);
 }
}
</
style>

<
div id="kompass"></div>
<
div id="nadel"></div>

Verwendete Grafiken:

kompass.webp - 313 x 313 Pixel - 12.1 KB
nadel.webp - 313 x 313 Pixel - 10.3 KB

Hintergrund anpassen

Der Hintergrund im Kompass, lässt sich mit CSS-background: radial-gradient(); oder conic-gradient() beliebig anpassen.
Siehe: Farbverlauf mit CSS

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Bausteinen (Codeschnipsel) aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<hr> Trennlinie

CSS - Animierte Box mit Keyframes

PHP - Switch Kontrollstruktur

JavaScript - https und den Querystring aus der URL entfernen

MySQL - Löschen eines Datensatzes oder mehrere Datensätze