W3.CSS Анимации
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
Анимация - это весело!
W3.CSS Классы анимации
W3.CSS предоставляет следующие классы для анимации:
| Класс | Определяет |
|---|---|
| w3-animate-top | Вставляет элемент сверху (от -300px до 0) |
| w3-animate-bottom | Вставляет элемент снизу (от -300px до 0) |
| w3-animate-left | Вставляет элемент слева (-300px to 0) |
| w3-animate-right | Вставляет элемент справа (-300px to 0) |
| w3-animate-opacity | Анимирует непрозрачность элемента от 0 до 1 за 1,5 секунды |
| w3-animate-zoom | Анимирует элемент размером от 0 до 100% |
| w3-animate-fading | Анимирует непрозрачность элемента от 0 до 1 и от 1 до 0 (постепенно блекнет + исчезает) |
| w3-spin | Вращает элемент на 360 градусов |
Анимация сверху
Класс w3-animate-top вставляет элемент сверху (от -300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Попробуйте сами »
Анимация снизу
Класс w3-animate-bottom вставляет элемент снизу (от -300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Попробуйте сами »
Анимация слева
Класс w3-animate-left вставляет элемент слева (-300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Попробуйте сами »
Анимация справа
Класс w3-animate-right вставляет элемент справа (-300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Попробуйте сами »
Появление элемента
Класс w3-animate-opacity анимирует непрозрачность элемента от 0 до 1 за 0,8 секунды.
Появление элемента с помощью класса w3-animate-opacity:
Увеличение элемента
Класс w3-animate-zoom анимирует элемент (производит увеличение) размером от 0 до 100% .
Увеличить (масштабировать) элемент с помощью класса w3-animate-zoom:
Вращение элементов
Класс w3-spin вращает элементы на 360 градусов:
Постоянное исчезновение и появление
Класс w3-animate-fading вводит и выводит элемент каждые 10 секунд (непрерывно):
Анимация исчезновения и появления
Появление всего
Пример
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img
class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
Попробуйте сами »
Навбар с иконками
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сайт работает на фреймворке W3.CSS.