CSS - Kompass-Animation
Eine Kombination aus Bildern, Keyframes, Farbverlauf und Schatten.
<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:
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.
<li> Listenelement
CSS - Fehleingaben in Formularen farbig hervorheben
PHP - Dateigröße ermitteln und Maßeinheit anzeigen 2