Hvordan overgang css “display” + “opacity” egenskaper

I CSS refererer overgang til en metode for å kontrollere hastigheten på det ekstra elementet mens du bruker CSS -egenskapene på den. Mer spesifikt kan du utføre forskjellige overganger, inkludert sideoverganger, bildeoverganger, tekst og mange flere. Du kan spesifisere endringene som skal brukes etter en bestemt tidsperiode, i motsetning til å ha eiendomsendringer i kraft umiddelbart.

Dette innlegget forklarer metoden for å sette overgangen ved hjelp av CSS “vise”Og“Opacitet" Egenskaper.

Hvordan overgang CSS “display” og “opacity” -egenskaper?

Å overføre css “vise”Og“Opacitet”Lag først en div -beholder med"”Element. Deretter får du tilgang til DIV -beholderen og legg til et bakgrunnsbilde ved hjelp av "bakgrunnsbilde”Eiendom. Etter det, sett "overgang”,“Opacitet”, Og andre nødvendige egenskaper i henhold til ditt valg.

Trinn 1: Lag en "div" -beholder

Opprinnelig lag en div container ved hjelp av “”Container og legg til en klasseattributt med et bestemt navn. For å gjøre det, har vi satt navnet på klassen som “punkt”:

Trinn 2: Angi "Display" -egenskaper

Deretter får du tilgang til DIV -beholderen ved å bruke klassenavnet "Hovedområdet”Og sett“vise”Eiendom:

.Hovedelement
Display: Block;

Her, verdien av "vise”Eiendom er satt som“blokkere”For å ta opp all skjermbredde.

Trinn 3: Legg til bakgrunnsbilde

Deretter bruker du følgende CSS -egenskaper på den tilgang til DIV -beholderen:

.Hovedelement
Høyde: 400px;
Bredde: 400px;
Bakgrunnsbilde: URL (Spring-Flowers.jpg);
Opacitet: 0.1;
Overgang: Opacity 2s Ease-in-Out;
Margin: 30px 50px;

I ovennevnte kodebit:

• “høyde”Og“bredde”Egenskaper bestemmer størrelsen på det definerte elementet.
• “bakgrunnsbilde”CSS -egenskap brukes til å sette inn et bilde ved hjelp av“URL ()”Funksjon på baksiden av elementet.
• “Opacitet”Bestemmer nivået av opacitet for et element. Opacitetsnivået demonstrerer transparensnivået, der "1”Brukes til ingen åpenhet, og“0.5" er for "50%”Åpenhet.
• “overgang”I CSS tillater brukerne å endre eiendomsverdier jevnt over en gitt varighet.
• “margin”Definerer rommet utenfor den definerte grensen rundt et element.

Produksjon

Trinn 4: Bruk “: Hover” Pseudo -velgeren

Få tilgang til Div -beholderen langs “:sveve”Pseudo -velger som brukes til å velge elementer når vi holder musen over dem:

.Hovedposten: Hopp
Opacitet: 1;

Sett deretter “Opacitet”Av det valgte elementet som“1”For å fjerne åpenheten.

Produksjon

Det handler om å sette overgang CSS “Display” og “Opacity” -egenskaper.

Konklusjon

For å stille inn overgangen "Display" og "Opacity" -egenskaper, lag først en DIV -beholder ved å bruke elementet. Deretter får du tilgang til DIV -elementet og sett "vise" som "blokkere”. Etter det, bruk de andre CSS -egenskapene, inkludert "bakgrunnsbilde”For å sette inn et bilde i beholderen,“ overgang ”,“ opacitet ”og andre. Dette innlegget forklarte metoden for å sette overgangen med CSS “vise”Og“Opacitet" egenskaper.