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

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

MySQL - Die Differenz zweier Uhrzeiten ermitteln