Denne artikel vil give:
- Metode 1: Indtoningseffekt ved hjælp af CSS-animationsegenskab
- Metode 2: Indtoningseffekt ved hjælp af CSS-overgangsegenskab
Metode 1: Indtoningseffekt ved hjælp af CSS 'animation' egenskab
For at designe en simpel HTML-side skal du tilføje følgende element på den:
- Tilføj ' '-elementet sammen med ' stil ' attribut. 'style'-attributten indeholder stilegenskaberne for elementet.
- Anvend ' farve ” egenskab i stilattributten for at definere elementets tekstfarve.
- Brug derefter ' ” element for at tilføje noget tekst eller et simpelt afsnit.
Nedenfor er HTML-koden:
< h2 stil = 'farve: rgb(84, 8, 191)' >
Linuxhint Tutorial hjemmeside
< / h2 >
< s > indtoningseffekt ved sideindlæsning < / s >
HTML-siden er oprettet med succes:
I CSS-sektionen, for at anvende fade-in-effekten på siden, skal ' animation ' CSS-egenskaben vil blive brugt på ' ' element på HTML-siden.
Stil 'body' Element
legeme {animation: fadeInPage ease 3s;
animation-iteration-count: en ;
}
'
' anvendes med følgende CSS-egenskaber:- “ animation ” er den stenografiske egenskab, der indstiller animationen ved at angive flere værdier. Her defineres animationens navn, animation-timing-funktion og animation-varighed.
- “ animation-iteration-tæller ” definerer, hvor mange gange animationen skal gentages.
Anvend '@keyframes'-regler på 'animation'
@keyframes fadeInPage {0 % {
Gennemsigtighed: 0 ;
}
100 % {
Gennemsigtighed: en ;
}
}
For at definere ' @keyframes ” regler for animationen, skal du nævne animationens navn efter @keyframes nøgleordet. Rediger animationsadfærden som følger:
- ved ' 0 % ' animation, ' Gennemsigtighed ” egenskaben tildeles værdien 0. Det betyder, at når animationen starter, er billedet gennemsigtigt.
- ved ' 100 % ' animation, opaciteten er indstillet til ' en ”, som henviser til en ensfarvet.
Produktion
Lad os gå videre mod den anden metode til at anvende fade-in-effekten ved sideindlæsning.
Metode 2: Fade-in-effekt ved hjælp af CSS 'transition'-egenskab
Tilføj en ' påfyldning ' attribut i ' ' element. Denne hændelse udløses ved sideindlæsning. Ved belastning er opaciteten af kropselementet indstillet til ' en ”, som vedrører en ensfarvet:
< legeme påfyldning = 'document.body.style.opacity='1'' >I dette eksempel er CSS ' overgang egenskaben bruges til at tilføje en indtoningseffekt:
legeme {Gennemsigtighed: 0 ;
overgang: opacitet 6s;
}
Følgende er forklaringen af de ovennævnte egenskaber:
- “ Gennemsigtighed ” egenskab definerer gennemsigtigheden af elementerne.
- Brug af CSS ' overgang ”, gradvist ændre værdierne af egenskaber over en bestemt tid.
Produktion
Vi har lært dig metoderne til at bruge CSS til en indtoningseffekt ved sideindlæsning.
Konklusion
Adskillige CSS-egenskaber kan bruges til at anvende en indtoningseffekt på HTML-elementer. Mere specifikt ' animation ', ' Gennemsigtighed ', og ' overgang ” egenskaber kan bruges til at angive animerede effekter på sider eller elementer. Animationerne justeres ved at bruge ' @keyframe ” regler. Denne artikel har forklaret metoderne til at tilføje en indtoningseffekt på sideindlæsning ved hjælp af CSS.