Селекторы в CSS. Особенности CSS. Эффекты, трансформации, анимация в CSS3
Автор: Maviyme701 • Май 4, 2024 • Практическая работа • 424 Слов (2 Страниц) • 68 Просмотры
ПРАКТИЧЕСКАЯ РАБОТА №6
ТЕМА: СЕЛЕКТОРЫ В CSS. ОСОБЕННОСТИ CSS. ЭФФЕКТЫ, ТРАНСФОРМАЦИИ, АНИМАЦИЯ В CSS3
Цел работы: Узнат, как работают CSS-селекторы.
В CSS-селекторы исползуются для стилизации HTML элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимално точно отбират элементы для стилизации.
h1 {
color: blue;
}
.special {
color: blue;
}
CSS трансформации исползуют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый резултат трансформации. Для того чтобы увидет само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутит какое-то событие (например, событие mouseover);
В примере, указанном ниже, расположены 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform:
div 1 | Перемещён вправо -webkit-transform: translate(3em,0); |
div 2 | Повёрнут на 30 градусов по часовой стрелке -webkit-transform: rotate(30deg); |
div 3 | Смещён влево и вниз -webkit-transform: translate(-3em,1em); |
div 4 | Увеличен вдвое -webkit-transform: scale(2); |
[pic 1]
Без данных трансформаций div-ы будут выглядет абсолютно одинаково.
Для анимации трансформаций в Webkit браузерах можно восползоватся префиксом -webkit-transition. Демонстрация представлена ниже:
box 1
box 2
box 3
box 4
Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мыш. При всём при этом, никакого JavaScript. Толко HTML и CSS.
CSS анимация может применятся не толко к трансформациям, но также и к другим свойствам, таким как прозрачност, цвет и многое другое. Это продемонстрировано в следующем примере. Один элемент преобразуется в другой и наоборот:
...