Тази статия ще предостави:
- Метод 1: Ефект на затихване с помощта на свойство на CSS анимация
- Метод 2: Ефект на затихване с помощта на свойството за преход на CSS
Метод 1: Ефект на затихване с помощта на свойството „анимация“ на CSS
За да проектирате проста HTML страница, добавете следния елемент към нея:
- Добавете „ ” заедно с „ стил ' атрибут. Атрибутът “style” съдържа свойствата за стил на елемента.
- Приложете „ цвят ” в атрибута style за определяне на цвета на текста на елемента.
- След това използвайте „ ”, за да добавите текст или обикновен абзац.
По-долу е HTML кодът:
< h2 стил = 'цвят: rgb(84, 8, 191)' >
Уебсайт с уроци по Linuxhint
< / h2 >
< стр > ефект на затихване при зареждане на страницата < / стр >
HTML страницата е създадена успешно:
В раздела за CSS, за да приложите ефекта на постепенно затихване върху страницата, полето „ анимация ” CSS свойството ще се използва на „ <тяло> ” елемент на HTML страницата.
Елемент стил „тяло“.
тяло {анимация: fadeInPage лекота 3s;
animation-iteration-count: един ;
}
„
“ се прилага със следните CSS свойства:- “ анимация ” е съкратеното свойство, което задава анимацията чрез указване на множество стойности. Тук се дефинират името на анимацията, функцията за време на анимация и продължителността на анимацията.
- “ animation-iteration-count ” определя колко пъти трябва да се повтаря анимацията.
Прилагане на правилата за „@keyframes“ върху „анимация“
@keyframes fadeInPage {0 % {
непрозрачност: 0 ;
}
100 % {
непрозрачност: един ;
}
}
За да определите „ @ключови рамки ” правила за анимацията, споменете името на анимацията след ключовата дума @keyframes. Променете поведението на анимацията, както следва:
- в „ 0% ' анимация, ' непрозрачност ” е присвоена стойност 0. Това означава, че когато анимацията започне, изображението е прозрачно.
- в „ 100% ” анимация, непрозрачността е зададена на „ един ”, което се отнася до плътен цвят.
Изход
Нека преминем напред към втория метод за прилагане на ефекта на затихване при зареждане на страницата.
Метод 2: Ефект на затихване с помощта на свойството „преход“ на CSS
Добавете „ зареждане ” в рамките на „ <тяло> ” елемент. Това събитие се задейства при зареждане на страницата. При зареждане непрозрачността на основния елемент е зададена на „ един “, което се отнася до плътен цвят:
< тяло зареждане = 'document.body.style.opacity='1'' >В този пример CSS „ преход ” се използва за добавяне на ефект на затихване:
тяло {непрозрачност: 0 ;
преход: непрозрачност 6s;
}
Следва обяснението на горепосочените свойства:
- “ непрозрачност ” свойството определя прозрачността на елементите.
- Използване на CSS “ преход ”, постепенно променяйте стойностите на свойствата за определено време.
Изход
Ние ви научихме на методите за използване на CSS за ефект на затихване при зареждане на страницата.
Заключение
Няколко свойства на CSS могат да се използват за прилагане на ефект на затихване върху HTML елементи. По-конкретно, „ анимация ”, “ непрозрачност ', и ' преход ” могат да се използват за указване на анимирани ефекти върху страници или елементи. Анимациите се настройват с помощта на „ @ключов кадър ” правила. Тази статия обяснява методите за добавяне на ефект на затихване при зареждане на страница с помощта на CSS.