Es gibt schon so viel mit, was man mit CSS machen kann! Einiges möchte ich euch hier vorstellen.
- Fancy-Border-Radius: alle möglichen Formen mit CSS erstellen:
https://9elements.github.io/fancy-border-radius/#60.73.48.27–230.430 - Wellen!: https://css-generators.com/wavy-shapes/
- Bewegte Rahmen: https://codepen.io/tonkotsuboy/pen/LEPWYzP
- Animierter Kreis: https://www.w3schools.com/cssref/tryit.php?filename=trycss_anim_transform
CSS
- CSS Text Animations: https://alvarotrigo.com/blog/css-text-animations/
Content-Stars
/* Animated CSS Kreis */
#myDIV {
margin: auto;
border: 2px solid #8ccbf8;
width: 200px;
height: 200px;
background: linear-gradient(130deg, rgb(249, 150, 45) 1%, rgb(252, 218, 83) 50%, rgb(250, 100, 42) 100%);
color: white;
animation: mymove 8s infinite;
border-radius: 50%;
margin-bottom: 2em;
display: flex;
align-items: center;
justify-content: center;
}
p.kreis {
text-align: center;
margin: 0; /* ← das war das Problem: Standard-margin des <p> */
padding: 0;
font-size: 1.5em;
}
@keyframes mymove {
50% { transform: rotate(360deg); }
}
/* Animated Farb-Verlauf */
.animate-charcter {
text-transform: uppercase;
background-image: linear-gradient(-225deg, #fdaa0c 0%, #fd8318 29%, #ffa313 67%, #ffbd20 100%);
background-size: 200% auto;
background-clip: text;
color: transparent; /* ← ersetzt -webkit-text-fill-color */
animation: textclip 2s linear infinite;
display: inline-block;
font-size: 3em;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}