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.
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.
Gif filen som ble brukt
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.