Dit artikel biedt:
- Methode 1: Fade-in-effect met behulp van CSS-animatie-eigenschap
- Methode 2: Fade-in-effect met behulp van CSS-overgangseigenschap
Methode 1: Fade-in-effect met behulp van CSS-eigenschap 'animatie'.
Voeg het volgende element toe om een eenvoudige HTML-pagina te ontwerpen:
- Voeg de ' ”-element samen met de “ stijl ” attribuut. Het attribuut 'style' bevat de stylingeigenschappen van het element.
- Pas de ' kleur ” eigenschap in het stijlattribuut om de tekstkleur van het element te definiëren.
- Gebruik daarna de ' ”-element om wat tekst of een eenvoudige alinea toe te voegen.
Hieronder staat de HTML-code:
< h2 stijl = 'kleur: rgb(84, 8, 191)' >
Linuxhint-zelfstudiewebsite
< / h2 >
< p > fade-in effect bij het laden van de pagina < / p >
De HTML-pagina is succesvol gemaakt:
In de CSS-sectie, om het fade-in-effect op de pagina toe te passen, de ' animatie ' CSS-eigenschap wordt gebruikt op de '
Stijl 'body' -element
lichaam {animatie: fadeInPage gemak 3s;
animatie-iteratie-telling: een ;
}
De '
' wordt toegepast met de volgende CSS-eigenschappen:- “ animatie ” is de afgekorte eigenschap die de animatie instelt door meerdere waarden op te geven. Hier worden de animatienaam, animatie-timing-functie en animatie-duur gedefinieerd.
- “ animatie-iteratie-telling ” definieert hoe vaak de animatie moet worden herhaald.
Regels '@keyframes' toepassen op 'animatie'
@keyframes fadeInPage {0 % {
ondoorzichtigheid: 0 ;
}
100 % {
ondoorzichtigheid: een ;
}
}
Om de ' @sleutelframes ” regels voor de animatie, vermeld de naam van de animatie achter het sleutelwoord @keyframes. Wijzig het animatiegedrag als volgt:
- Bij ' 0% ” animatie, de “ ondoorzichtigheid ” eigenschap krijgt de waarde 0 toegewezen. Dit betekent dat wanneer de animatie start, de afbeelding transparant is.
- Bij ' 100% ” animatie, de dekking is ingesteld op “ een ”, wat verwijst naar een effen kleur.
Uitgang
Laten we verder gaan naar de tweede methode voor het toepassen van het fade-in-effect bij het laden van pagina's.
Methode 2: Fade-in-effect met behulp van CSS-eigenschap 'overgang'.
Voeg een ' laden ” attribuut binnen de “
In dit voorbeeld is de CSS “ overgang ” eigenschap wordt gebruikt om een fade-in effect toe te voegen:
lichaam {ondoorzichtigheid: 0 ;
overgang: dekking 6s;
}
Hieronder volgt de uitleg van de bovengenoemde eigenschappen:
- “ ondoorzichtigheid ” eigenschap definieert de transparantie van de elementen.
- CSS gebruiken ' overgang ”, verander geleidelijk de waarden van eigenschappen gedurende een bepaalde tijd.
Uitgang
We hebben je de methoden geleerd voor het gebruik van CSS voor een fade-in-effect bij het laden van pagina's.
Gevolgtrekking
Verschillende CSS-eigenschappen kunnen worden gebruikt om een fade-in-effect toe te passen op HTML-elementen. Meer specifiek, de “ animatie ”, “ ondoorzichtigheid ', en ' overgang ” eigenschappen kunnen worden gebruikt om geanimeerde effecten op pagina's of elementen te specificeren. De animaties worden aangepast met behulp van de “ @sleutelframe ' reglement. Dit artikel heeft de methoden uitgelegd om een fade-in-effect toe te voegen aan het laden van pagina's met behulp van CSS.