Animert tekst bakgrunn med css og gif
En av de enkleste måtene å animere bakgrunnen på en tekst er å bruke
background-clip og en gif som bakgrunn.
I tillegg kan du legge til ekstra bevegelse ved å sette background-position i en css animasjon.
Kode på github.
Kode
h1 {
background: url("./abstract2.gif");
background-size: cover;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
animation: animatedBackground 5s;
}
@keyframes animatedBackground {
from {
background-position: 50% 0%;
}
to {
background-position: 50%;
}
}
Her er et eksempel på en loading tekst som benytter background-clip og som blender inn med bakgrunnsfargen på gif-en som er benyttet for en ganske kul effekt.
Kode
body {
background: #422b5d;
color: #00000047;
}
h1 {
background: url("./lo.gif");
background-size: cover;
background-position: center;
-webkit-background-clip: text;
}
Gif filen som ble brukt
Sist endret av random105675; 8. januar 2023 kl. 12:07.
Grunn: Automatisk sammenslåing med etterfølgende innlegg.