Улучшайте веб-страницы с помощью потрясающих анимаций CSS

Введение

В этом практическом занятии мы будем изучать различные концепции и методы CSS для улучшения визуального вида веб-страниц. С помощью практических упражнений мы научимся создавать и изменять правила CSS, применять стили к элементам HTML и использовать селекторы CSS для выбора определенных элементов. В конце практического занятия вы будете уверенно знать, как использовать CSS для создания визуально привлекательных и адаптивных веб-страниц.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transitions("Transitions") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/colors -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/box_model -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/margin_and_padding -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/display_property -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/pseudo_classes -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/animations -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/transitions -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} css/transformations -.-> lab-35214{{"Анимация теневой рамки при наведении курсора"}} end

Анимация теневой рамки при наведении курсора

В ВМ уже предоставлены index.html и style.css.

Для создания теневой рамки вокруг текста при наведении курсора выполните следующие шаги:

Установите transform: perspective(1px), чтобы дать элементу трехмерное пространство, изменив расстояние между плоскостью Z и пользователем, и translateZ(0), чтобы переместить элемент <p> по оси z в трехмерном пространстве.
Используйте box-shadow, чтобы сделать рамку прозрачной.
Включите переходы для box-shadow и transform с помощью свойства transition-property.
Примените новое значение box-shadow и transform: scale(1.2), чтобы изменить масштаб текста, используя псевдо-классы :hover, :active и :focus.
Добавьте класс hover-shadow-box-animation к элементу <p>.

Вот код HTML:

<p class="hover-shadow-box-animation">Box it!</p>

Вот код CSS:

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  margin: 10px;
  transition:
    box-shadow 0.3s,
    transform 0.3s;
}

.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
  transform: scale(1.2);
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по анимации теневой рамки при наведении курсора. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.