Овај чланак ће пружити:
- Метод 1: Фаде-ин Ефекат коришћењем својства ЦСС анимације
- Метод 2: Фаде-ин Ефекат коришћењем својства ЦСС прелаза
Метод 1: Ефекат постепеног појављивања помоћу својства ЦСС „анимација“.
Да бисте дизајнирали једноставну ХТМЛ страницу, додајте на њу следећи елемент:
- Додајте ' <х2> ” елемент заједно са „ стил ” атрибут. Атрибут „стиле“ садржи својства стила елемента.
- Примените „ боја ” својство у атрибуту стила за дефинисање боје текста елемента.
- Након тога, користите „ <п> ” за додавање текста или једноставног пасуса.
Испод је ХТМЛ код:
< х2 стил = 'боја: ргб (84, 8, 191)' >
Веб локација са упутством за Линукхинт
< / х2 >
< стр > ефекат фаде-ин при учитавању странице < / стр >
ХТМЛ страница је успешно направљена:
У одељку ЦСС, да бисте применили ефекат фаде-ин на страницу, „ анимација ” ЦСС својство ће се користити на „ <боди> ” елемент ХТМЛ странице.
Стилски елемент „тело“.
тело {анимација: фадеИнПаге еасе 3с;
аниматион-итератион-цоунт: једно ;
}
„<боди>“ се примењује са следећим ЦСС својствима:
- “ анимација ” је скраћено својство које поставља анимацију навођењем више вредности. Овде је дефинисано име анимације, функција времена-време анимације и трајање анимације.
- “ анимација-итерација-број ” дефинише колико пута анимација треба да се понови.
Примените правила „@кеифрамес“ на „анимацију“
@кеифрамес фадеИнПаге {0 % {
непрозирност: 0 ;
}
100 % {
непрозирност: једно ;
}
}
Да бисте дефинисали „ @кеифрамес ” правила за анимацију, наведите име анимације иза кључне речи @кеифрамес. Измените понашање анимације на следећи начин:
- у „ 0% “ анимација, “ непрозирност ” својству је додељена вредност 0. То значи да када анимација почне, слика је провидна.
- у „ 100% ” анимација, непрозирност је подешена на “ једно “, што се односи на чврсту боју.
Излаз
Идемо даље ка другом методу за примену ефекта Фаде-ин на учитавање странице.
Метод 2: Фаде-ин ефекат коришћењем својства ЦСС „транситион“.
Додајте „ на оптерећење ” атрибут у оквиру „ <боди> ” елемент. Овај догађај се покреће при учитавању странице. При учитавању, непрозирност елемента тела је подешена на „ једно “, који се односи на једнобојну боју:
< тело на оптерећење = 'доцумент.боди.стиле.опацити='1'' >У овом примеру, ЦСС “ прелаз ” својство се користи за додавање ефекта затамњења:
тело {непрозирност: 0 ;
прелаз: непрозирност 6с;
}
Следи објашњење горе наведених својстава:
- “ непрозирност ” својство дефинише транспарентност елемената.
- Коришћење ЦСС “ прелаз “, постепено мењајте вредности својстава током одређеног времена.
Излаз
Научили смо вас методама за коришћење ЦСС-а за ефекат постепеног учитавања странице.
Закључак
Неколико ЦСС својстава се може користити за примену ефекта бледења на ХТМЛ елементе. Тачније, „ анимација ”, “ непрозирност ', и ' прелаз ” својства се могу користити за одређивање анимираних ефеката на страницама или елементима. Анимације се подешавају помоћу „ @кеифраме ' Правила. Овај чланак је објаснио методе за додавање ефекта постепеног учитавања странице помоћу ЦСС-а.