Эта статья предоставит:
- Метод 1: эффект постепенного появления с использованием свойства анимации CSS
- Метод 2: эффект постепенного появления с использованием свойства перехода CSS
Метод 1: эффект постепенного появления с использованием свойства CSS «анимация»
Чтобы создать простую HTML-страницу, добавьте на нее следующий элемент:
- Добавить ' » вместе с « стиль атрибут. Атрибут «стиль» содержит свойства стиля элемента.
- Примените « цвет » в атрибуте стиля, чтобы определить цвет текста элемента.
- После этого используйте « <р> », чтобы добавить текст или простой абзац.
Ниже приведен HTML-код:
< h2 стиль знак равно 'цвет: RGB(84, 8, 191)' >
Учебный сайт Linuxhint
< / h2 >
< п > эффект затухания при загрузке страницы < / п >
HTML-страница успешно создана:
В разделе CSS, чтобы применить эффект затухания на странице, нажмите « анимация » Свойство CSS будет использоваться в « <тело> » элемент HTML-страницы.
Элемент стиля «тело»
тело {анимация: fadeInPage легкость 3 с;
число итераций анимации: один ;
}
«
» применяется со следующими свойствами CSS:- “ анимация ” — это сокращенное свойство, которое задает анимацию, указывая несколько значений. Здесь определяются имя анимации, функция синхронизации анимации и продолжительность анимации.
- “ количество итераций анимации ” определяет, сколько раз должна повторяться анимация.
Примените правила «@keyframes» к «анимации»
@keyframes исчезают в странице {0 % {
непрозрачность: 0 ;
}
100 % {
непрозрачность: один ;
}
}
Чтобы определить « @ключевые кадры ” для анимации, укажите имя анимации после ключевого слова @keyframes. Измените поведение анимации следующим образом:
- В ' 0% анимация, « непрозрачность ” присвоено значение 0. Это означает, что при запуске анимации изображение прозрачно.
- В ' 100% », непрозрачность установлена на « один », который относится к сплошному цвету.
Вывод
Давайте перейдем ко второму методу применения эффекта Fade-in при загрузке страницы.
Метод 2: эффект постепенного появления с использованием свойства CSS «transition»
Добавьте “ в процессе ' внутри ' <тело> элемент. Это событие срабатывает при загрузке страницы. При загрузке непрозрачность элемента body устанавливается на « один ”, который относится к сплошному цвету:
< тело в процессе знак равно 'document.body.style.opacity='1'' >В этом примере CSS « переход ” используется для добавления эффекта затухания:
тело {непрозрачность: 0 ;
переход: непрозрачность 6s;
}
Ниже приводится объяснение вышеуказанных свойств:
- “ непрозрачность ” определяет прозрачность элементов.
- Использование CSS' переход », постепенно меняйте значения свойств в течение заданного времени.
Вывод
Мы научили вас методам использования CSS для эффекта плавного появления при загрузке страницы.
Заключение
Несколько свойств CSS можно использовать для применения эффекта затухания к элементам HTML. Более конкретно, « анимация », « непрозрачность ', и ' переход ” можно использовать для указания анимированных эффектов на страницах или элементах. Анимации настраиваются с помощью кнопки « @ключевой кадр ' правила. В этой статье объясняются методы добавления эффекта плавного появления при загрузке страницы с помощью CSS.