CSS - Kompass-Animation

Eine Kombination aus Bildern, Keyframes, Farbverlauf und Schatten.


<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 Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<hgroup> Überschriften gruppieren

CSS - Mit import mehrere CSS-Dateien zusammenfassen

PHP - Datei alle fünf Sekunden aktualisieren

JavaScript - Geburtstag anzeigen

MySQL - Das Datum und die Uhrzeit der letzten 30 Minuten anzeigen

Selbstdarstellung
Webdarstellung ist nicht nur Selbstdarstellung. Berichten Sie nicht allzu viel über sich selbst. Den Besucher interessiert in der Regel mehr ein Thema (Hobby) das Sie haben als ein langer Bericht, dass Sie weltweit nicht nur der Einzige, sondern auch der Beste sind. Wenn dies zutreffen soll, dann beweisen Sie es mit Ihrem Angebot. Qualität spricht sich auch im Netz herum.