Tento článek poskytne:
- Metoda 1: Efekt Fade-in pomocí vlastnosti CSS animace
- Metoda 2: Efekt prolínání pomocí vlastnosti přechodu CSS
Metoda 1: Efekt prolínání s použitím vlastnosti „animace“ CSS
Chcete-li navrhnout jednoduchou stránku HTML, přidejte na ni následující prvek:
- Přidat ' 'prvek spolu s ' styl ' atribut. Atribut „style“ obsahuje vlastnosti stylu prvku.
- Aplikujte „ barva ” vlastnost v atributu style k definování barvy textu prvku.
- Poté použijte „ ” pro přidání nějakého textu nebo jednoduchého odstavce.
Níže je uveden HTML kód:
< h2 styl = 'color: rgb(84, 8, 191)' >
Výukový web Linuxhint
< / h2 >
< p > efekt zeslabování při načítání stránky < / p >
Stránka HTML byla úspěšně vytvořena:
V sekci CSS, chcete-li na stránku použít efekt prolínání, „ animace ' CSS vlastnost bude použita na ' ” prvek HTML stránky.
Stylový prvek „tělo“.
tělo {animace: fadeInPage easy 3s;
počet-iterací animací: jeden ;
}
„
“ se použije s následujícími vlastnostmi CSS:- “ animace ” je zkrácená vlastnost, která nastavuje animaci zadáním více hodnot. Zde je definován název animace, funkce časování animace a doba trvání animace.
- “ animace-iterace-počet ” definuje, kolikrát se má animace opakovat.
Použijte pravidla „@klíčové snímky“ na „animaci“
@keyframes fadeInPage {0 % {
neprůhlednost: 0 ;
}
100 % {
neprůhlednost: jeden ;
}
}
Chcete-li definovat „ @klíčové snímky ” pravidla pro animaci, uveďte název animace za klíčovým slovem @keyframes. Upravte chování animace následovně:
- Na ' 0 % animace, neprůhlednost Vlastnost ” má přiřazenu hodnotu 0. To znamená, že při spuštění animace je obrázek průhledný.
- Na ' 100% ” animace, neprůhlednost je nastavena na “ jeden “, což odkazuje na plnou barvu.
Výstup
Přejděme k druhé metodě použití efektu Fade-in na načítání stránky.
Metoda 2: Efekt zatmívání pomocí vlastnosti „přechod“ CSS
Přidejte „ načíst ” atribut v rámci “ prvek. Tato událost se spouští při načítání stránky. Při zatížení je neprůhlednost prvku těla nastavena na „ jeden “, která se vztahuje k plné barvě:
< tělo načíst = 'document.body.style.opacity='1'' >V tomto příkladu CSS „ přechod ” vlastnost se používá k přidání efektu prolínání:
tělo {neprůhlednost: 0 ;
přechod: neprůhlednost 6s;
}
Následuje vysvětlení výše uvedených vlastností:
- “ neprůhlednost Vlastnost ” definuje průhlednost prvků.
- Použití CSS“ přechod “, postupně měnit hodnoty vlastností po určenou dobu.
Výstup
Naučili jsme vás metody použití CSS pro efekt zeslabení při načítání stránky.
Závěr
K aplikaci efektu prolínání na prvky HTML lze využít několik vlastností CSS. Přesněji řečeno, „ animace “, “ neprůhlednost ', a ' přechod ” vlastnosti lze použít k určení animovaných efektů na stránkách nebo prvcích. Animace se upravují pomocí „ @klíčový snímek “ pravidla. Tento článek vysvětluje metody přidání efektu prolínání při načítání stránky pomocí CSS.