Willkommen in meiner CSS-Galerie!
Hier findest Du ein paar eigens in CSS geschriebene Animationen, gemeinsam mit den dazugehörigen
Style-Regeln.
Eine klassische
Um den HTML-Code einfach zu halten,
macht das Ganze sowohl von
Sieht ganz nett aus.
/* Lagerfeuer */
.fire {
position: relative;
width: 500px; height: 500px;
}
.fire * { position: absolute; }
.fire > div { width: 100%; height: 100%; }
.fire > [name="wood"] > div {
width: 20%; height: 20%;
bottom: 0; margin: 0 40%;
border-radius: 50%;
background-color: var(--wood-dark);
}
.fire > [name="wood"] :nth-child(1) { margin: 0 25% 0 55%; }
.fire > [name="wood"] :nth-child(2) { margin: 0 55% 0 25%; }
.fire > [name="wood"] > div::before, .fire > [name="wood"] > div::after {
content: ''; position: absolute;
width: 90%; height: 90%;
border-radius: 50%; margin: 5% 0 0 5%;
background-color: var(--wood-dark);
border: 10px solid var(--wood-light);
box-sizing: border-box;
}
.fire > [name="wood"] > div::after {
width: 60%; height: 60%; margin: 20% 0 0 20%;
background-color: var(--wood-dark);
border: 10px solid var(--wood-light);
}
.fire > [name="flames"] > div {
bottom: 12%;
background-color: var(--fire-red);
border-radius: 0 100% 50% 50% / 0 50% 50% 60%;
transform: rotate(40deg);
}
.fire > [name="flames"] > div::before, .fire > [name="flames"] > div::after {
content: '';
position: absolute;
width: 80%; height: 80%;
margin: 10% 0 0 10%;
background-color: var(--fire-orange);
border-radius: 0 100% 50% 50% / 0 50% 50% 60%;
animation: 1.25s fire-flame-3 infinite;
}
.fire > [name="flames"] > div::after {
width: 50%; height: 50%;
margin: 25% 0 0 25%;
background-color: var(--fire-yellow);
animation: 0.75s fire-flame-4 0.25s infinite;
}
.fire > [name="flames"] :nth-child(1) {
width: 25%; height: 25%; margin: 0 20% 0 55%;
animation: 1.5s fire-flame-2 0.2s infinite;
}
.fire > [name="flames"] :nth-child(2) {
width: 25%; height: 25%; margin: 0 55% 0 20%;
animation: 1.5s fire-flame-2 0.1s infinite;
}
.fire > [name="flames"] :nth-child(3) {
width: 40%; height: 40%; margin: 0 30%;
animation: 1.5s fire-flame-1 infinite;
}
.fire > [name="shine"] {
opacity: 0.5; bottom: -10%;
background: rgb(255,224,0);
background: radial-gradient(
circle,
rgba(255,224,0,0.3) 0%,
rgba(230,41,3,0.2) 30%,
rgba(0,0,0,0) 70%
);
animation: 1s fire-shine infinite;
}
@keyframes fire-flame-1 {
25% { width: 45%; height: 45%; }
50% {
width: 40%; height: 40%;
transform: rotate(50deg);
border-radius: 0 60% 50% 50% / 0 50% 50% 100%;
}
75% { width: 45%; height: 45%; }
}
@keyframes fire-flame-2 {
25% { width: 30%; height: 30%; }
50% {
width: 25%; height: 25%;
transform: rotate(50deg);
border-radius: 0 60% 50% 50% / 0 50% 50% 100%;
}
75% { width: 30%; height: 30%; }
}
@keyframes fire-flame-3 { 50% { width: 70%; height: 70%; margin: 15% 0 0 15%; } }
@keyframes fire-flame-4 { 50% { width: 40%; height: 40%; margin: 35% 0 0 35%; } }
@keyframes fire-shine {
50% { opacity: 1; }
}
<div class = "fire">
<div name = "wood">
<div></div> <div></div> <div></div>
</div>
<div name = "flames">
<div></div> <div></div> <div></div>
</div>
<div name = "shine"></div>
</div>
Eine Katze, die ins Bild huscht, zwinkert, und den Kopf wieder weg zieht.
Ohren, Nase und Augen hinken beim Hochkommen leicht hinterher, damit die Bewegung natürlicher
aussieht.
Ein kritischer Punkt ist die Rahmenbreite der Boxen, die die geschlossenen Augen und den
Mund ausmachen.
/* Globale Variablen */
:root {
--cat-time: 4s;
--cat-color: black;
--cat-color-2: gray;
--cat-eye-color: rgb(255,200,0);
--cat-border: 10px;
}
/* Katze */
.cat {
position: relative;
width: 100%; height: 100%;
margin: 0 auto;
animation: moveup var(--cat-time) infinite;
}
.cat * { background-color: var(--cat-color); }
.cat > [name="head"] {
position: absolute;
bottom: 0;
width: 100%; height: 80%;
border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}
/* Ohren */
.cat > [name="head"]::before, .cat > [name="head"]::after {
content: '';
position: absolute;
left: 5%;
width: 35%; aspect-ratio: 1/1;
background-color: var(--cat-color);
border-radius: 10% 100% 0 20% / 10% 20% 0 100%;
transform: rotate(10deg);
animation: ear-tilt-left var(--cat-time) infinite;
}
.cat > [name="head"]::after {
left: auto; right: 5%;
border-radius: 100% 10% 20% 0 / 20% 10% 100% 0;
transform: rotate(-10deg);
animation: ear-tilt-right var(--cat-time) infinite;
}
/* Augen */
.cat > [name="head"] > [name="eye"] {
position: absolute;
width: 30%; aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--cat-eye-color);
z-index: 1;
animation: blink-1 var(--cat-time) infinite,
moveup-2 var(--cat-time) infinite;
}
.cat > [name="head"] > [name="eye"]::before, .cat > [name="head"] > [name="eye"]::after {
content: '';
position: absolute;
width: 50%; height: 50%;
margin: 25%;
border-radius: 50%;
background-color: black;
}
.cat > [name="head"] > [name="eye"]::after {
background-color: white;
width: 25%; height: 25%;
}
.cat > [name="head"] > :nth-child(1) { margin: 18% 18% 0 52%; }
.cat > [name="head"] > :nth-child(2) { margin: 18% 52% 0 18%; }
/* Geschlossene Augen */
.cat > [name="head"] > [name="eye-closed"] {
position: absolute;
width: 20%; aspect-ratio: 1/1; top: 35%;
border-radius: 0 0 100% 0 / 0 0 100% 0;
box-sizing: border-box;
background-color: transparent;
border-bottom: 20px solid var(--cat-color-2);
border-right: 20px solid var(--cat-color-2);
transform: rotate(45deg);
z-index: 1;
opacity: 0;
animation: blink-2 var(--cat-time) infinite;
}
.cat > [name="head"] > :nth-child(3) { margin: 0 57% 0 23%; }
.cat > [name="head"] > :nth-child(4) { margin: 0 23% 0 57%; }
/* Nase */
.cat > [name="head"] > [name="mouth"] {
position: absolute;
width: 5%; aspect-ratio: 1/1;
margin: 47.5%;
border-radius: 100% 40% 10% 40% / 100% 40% 10% 40%;
transform: rotate(45deg);
background-color: var(--cat-color-2);
animation: moveup-2 var(--cat-time) infinite;
}
/* Mund */
.cat > [name="head"] > [name="mouth"]::before, .cat > [name="head"] > [name="mouth"]::after {
content: '';
position: absolute;
left: -95%; top: 95%;
width: 200%; height: 200%;
border-radius: 0 0 100% 0 / 0 0 100% 0;
box-sizing: border-box;
border-bottom: 10px solid var(--cat-color-2);
border-right: 10px solid var(--cat-color-2);
}
.cat > [name="head"] > [name="mouth"]::after {
left: 95%; top: -95%;
}
@keyframes moveup {
0% { margin-top: 100%; }
10%,90% { margin-top: 0%; }
100% { margin-top: 100%; }
}
@keyframes moveup-2 {
0% { top: 30%; }
13% { top: 0%; }
}
@keyframes ear-tilt-left {
0% { transform: rotate(-30deg); }
10%, 90% { transform: rotate(10deg); }
100% { transform: rotate(15deg); }
}
@keyframes ear-tilt-right {
0% { transform: rotate(30deg); }
10%, 90% { transform: rotate(-10deg); }
100% { transform: rotate(-15deg); }
}
@keyframes blink-1 {
0%, 49% { opacity: 1; }
50%, 59% { opacity: 0; }
60% { opacity: 1; }
}
@keyframes blink-2 {
0%, 49% { opacity: 0; }
50%, 59% { opacity: 1; }
60% { opacity: 0; }
}
/* Border anpassen an Bildschirmgröße */
@media only screen and (max-width: 700px) {
:root {
--cat-border: 5px;
}
}
<div class = "cat">
<div name = "head">
<div name="eye"></div> <div name="eye"></div>
<div name="eye-closed"></div> <div name="eye-closed"></div>
<div name="mouth"></div>
</div>
</div>
Eine Raddampfer, der mit Höchstgeschwindigkeit über einen blauen Fluss brettert.
Wie zu vermuten, eine sehr aufwendige Animation mit einer ordentlichen Reihe Elementen.
Wichtig ist hier vor allem die