Denna artikel kommer att ge:
- Metod 1: Intoningseffekt med CSS-animeringsegenskap
- Metod 2: Intoningseffekt med CSS-övergångsegenskap
Metod 1: Intoningseffekt med CSS-egenskapen 'animation'.
För att designa en enkel HTML-sida, lägg till följande element på den:
- Lägg till ' ' element tillsammans med ' stil ' attribut. 'style'-attributet innehåller stilegenskaperna för elementet.
- Använd ' Färg '-egenskapen i stilattributet för att definiera elementets textfärg.
- Efter det använder du ' ” för att lägga till text eller ett enkelt stycke.
Nedan är HTML-koden:
< h2 stil = 'färg: rgb(84, 8, 191)' >
Linuxhint Tutorial Webbplats
< / h2 >
< sid > intoningseffekt vid sidladdning < / sid >
HTML-sidan har skapats framgångsrikt:
I CSS-avsnittet, för att tillämpa fade-in-effekten på sidan, ' animation ' CSS-egenskapen kommer att användas på '
Stil 'kropp' Element
kropp {animation: fadeInPage ease 3s;
animation-iteration-count: ett ;
}
'
' tillämpas med följande CSS-egenskaper:- ' animation ” är den stenografiska egenskapen som ställer in animeringen genom att ange flera värden. Här definieras animationens namn, animation-timing-funktion och animation-duration.
- ' animation-iteration-count ” definierar hur många gånger animeringen ska upprepas.
Tillämpa '@keyframes'-regler på 'animation'
@keyframes fadeInPage {0 % {
opacitet: 0 ;
}
100 % {
opacitet: ett ;
}
}
För att definiera ' @nyckelrutor ” regler för animeringen, nämner animationens namn efter nyckelordet @keyframes. Ändra animationsbeteendet enligt följande:
- vid ' 0 % ' animation, den ' opacitet ” egenskapen tilldelas värdet 0. Det betyder att när animeringen startar är bilden genomskinlig.
- vid ' 100 % ' animation, opaciteten är inställd på ' ett ”, som hänvisar till en enfärgad färg.
Produktion
Låt oss gå vidare mot den andra metoden för att tillämpa fade-in-effekten vid sidladdning.
Metod 2: Intoningseffekt med CSS-egenskapen 'transition'.
Lägg till en ' ladda ' attribut i '
I det här exemplet är CSS ' övergång ”-egenskapen används för att lägga till en toningseffekt:
kropp {opacitet: 0 ;
övergång: opacitet 6s;
}
Följande är förklaringen av de ovan angivna egenskaperna:
- ' opacitet ” egenskapen definierar transparensen av elementen.
- Använder CSS ' övergång ”, gradvis ändra värdena på fastigheter under en viss tid.
Produktion
Vi har lärt dig metoderna för att använda CSS för en intoningseffekt vid sidladdning.
Slutsats
Flera CSS-egenskaper kan användas för att applicera en toningseffekt på HTML-element. Mer specifikt, ' animation ”, “ opacitet ', och ' övergång ” egenskaper kan användas för att ange animerade effekter på sidor eller element. Animationerna justeras med hjälp av ' @nyckelram 'regler. Den här artikeln har förklarat metoderna för att lägga till en toningseffekt vid sidladdning med CSS.