Et kaskaderende stilark er en stiluttalelse som brukes til å legge til effekter og egenskaper til innholdet som er opprettet og bygget ved hjelp av HTML -koden. Alle dannede elementer er designet gjennom CSS. Både HTML- og CSS-språk brukes til å utvikle og designe fronten av nettstedet, enten en statisk webside eller et dynamisk nettsted. I denne artikkelen vil vi snakke om en egenskap til CSS der innholdet i HTML -kroppen blir falmet når vi bruker noen tilstand på dem (i.e., en overgang, på nytt på nettsiden.)

Introduksjon til HTML og CSS:

HTML -kode har forskjellige elementer, som tekst, bilder, videoer, animasjoner, avsnitt og etc. Ettersom andre programmeringsspråk har spørring eller koder, inneholder HTML tagger. Brukeren må ha kunnskap om de grunnleggende kodene til HTML. Den grunnleggende syntaksen til HTML -tagger er:

HTML har to seksjoner: hode- og kroppsdeler. På den annen side bruker vi CSS med en åpnings- og lukkekode . Cascading Style Sheet (CSS) inneholder tre ytterligere stiltyper: Inline, Internt og ekstern CSS. Inline CSS er den som er erklært inne i HTML -taggen skrevet i kroppsseksjonen. Den andre er den interne taggen som er erklært inne i hodedelen av HTML -taggen. Den tredje er ekstern, da navnet viser at det er erklært i en annen fil utenfor HTML -taggen. All denne oversikten er gitt fordi brukeren skal vite om hvilke typer CSS -erklæringer. Fordi vi har brukt de to første typene CSS som er inline og interne CSS, i denne artikkelen.

Fade i overgang:

Fade er en unik egenskap av CSS som får innholdet i HTML til å forsvinne. Hensikten med å bruke Fade -egenskapen er å søke brukerens oppmerksomhet, eller å varsle brukeren med litt informasjon. Denne falmeeffekten er forskjellig fra den blinkende effekten, ettersom den blinkende egenskapen får innholdet til å holde på skjulesøksprosessen. Men Fade -egenskapen vises en gang etter at Fading ikke blir falmet igjen med mindre siden er lastet på nytt. For det meste brukes overgangsegenskapen på nettsiden. Med andre ord, når websiden er lastet, er siden opprinnelig tom.

Overgangseiendom ved å sette opacitet til 1 når siden er lastet:

Dette er metodikken som kroppen er satt til 0 opacitet på det første nivået. Deretter brukes overgangsegenskapen her for å animere overgangseiendommen når den endres. Ved å bruke Onload -hendelsen, setter vi egenskapen til opacitet som 1 når websiden er lastet. På grunn av overgangen vil opacitetsendringen som vi bruker i CSS bli brukt til å falme siden.

Eksempel:
Vi har brukt et enkelt eksempel for å utdype arbeidet med falmeffektene på overgangen. Vi kan bruke enhver effekt for å vise innholdet i HTML Fading. I dette eksemplet har vi brukt enkle tekster i form av overskrift og avsnitt. La oss nå forstå HTML- og CSS -koden som brukes til å oppnå falmeeffekten i overgangen.

Inne i hodeseksjonen nevner vi tittelen på siden. Deretter brukes stilmerker. Denne stilmodusen er av intern styling, ettersom hele koden er definert i hodemerket. Inne i stilmerket har vi målrettet hele kroppen til HTML, som vi har brukt opacitetseffekten av 0. Det betyr at når websiden er lastet inn i starten, er websiden tom som en helhet. I mellomtiden, etter 3 sekunders overgang, er kroppen til HTML synlig. Denne egenskapen gjøres gjennom overgangsverdien til CSS -stylingen, overgangen til overgangen er satt som 3S.

Ved å bruke disse egenskapene vil hele innholdet inne i kroppen (enten tekst eller et hvilket som helst bilde) ha null opacitet. Men etter en spesifisert tid vil alt innholdet være synlig.

CSS -kode:

På vei mot kroppsdelen av HTML -kodene, har vi brukt en på belastningseffekt. Eller, kroppens opacitet er satt som 1, etter den falmede effekten.

< body onload = "document.body.style.opacity = '1'">

Etter det er kroppsbakgrunnsfargen satt til svart. En overskrift

Navnet er erklært. Vi har lagt til en inline styling i taggen ved å legge fontfargen hvit egenskap til overskriften. Lukk deretter overskriftstoden.

HTML Body Code:

Tilsvarende en enkel tekst med en fet Funksjonen legges til og den samme fontegenskapen legges til den fet teksten gjennom Inline CSS.

< p style = "color: white" >

Til slutt er det siste innholdet som legges til kroppen

har inline styling. Lukk alle taggene og lagre tekstfilen med en utvidelse av '.html 'som navn på tekstfilen vi har brukt er prøve.html. Hensikten med denne utvidelsen er også å åpne denne filen i notisblokken og nettleseren. Mens ''.TXT 'utvidelse vil åpne all teksten når den kjøres i nettleseren. Men når vi åpner filen i nettleseren med en HTML -utvidelse, vil den danne nettsiden i henhold til HTML -innholdet.

Vi har lagt ved en liten del av videoen som viser Fade-in-overgangseffekten på utførelsen av filen.

Produksjon:
Videospillerhttps: // linuxhint.com/wp-content/uploads/2022/06/CSS-Fade-in-overgang.MP400: 0000: 0000: 10 Bruk opp/ned piltastene for å øke eller redusere volumet.

Når siden er lastet ved å åpne filen i nettleseren, vil du se at kroppen i starten ikke vises, men etter 3 sekunder vises innholdet som er opprettet i kroppen sammen. Hver gang vi laster inn siden, blir alle kroppsdelene oppdatert. Opprinnelig blir de falmet, men så vises teksten når perioden som er nevnt i CSS, sendes. Vi har brukt 'F5' -tasten for å laste inn siden igjen.

Vi kan også endre tiden vi har nevnt etter vårt ønske. Tilsvarende kan alle falmeeffektene bare brukes på hvilken som helst spesifikk del av HTML -innholdet i stedet for å bruke hele kroppen. Med det kan du fokusere direkte på den spesifiserte delen av websiden.

Konklusjon:

CSS Fade in Transition -artikkelen består av overgangsegenskapen Fading og viser HTML -data. Vi har introdusert den grunnleggende bruken av HTML- og CSS -språk og deres typer. Tagger Distribusjon og formål på begge språkene er utdypet. Deretter diskuterte vi overgangsegenskapen relatert til opacitetseffekten i CC -egenskaper styling. En enkel tekstfunksjon brukes i kroppsdelen. Hele kroppen brukes med overgangseffekten.