Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
AbonnerSkjul
Host1.no - Webhotell fra 29,-, virtuell server fra 249,-. 15% rabatt med rabattkode "nFF". Besøk oss på Host1.no!
  0 479
random105675
Gjest
n/a 0
8. januar 2023
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.