悬停阴影框动画

简介

在本实验中，我们将探索各种 CSS 概念和技术，以提升网页的视觉外观。通过实际操作练习，我们将学习如何创建和修改 CSS 规则、将样式应用于 HTML 元素，以及使用 CSS 选择器来定位特定元素。在实验结束时，你将对如何使用 CSS 创建视觉上吸引人且响应式的网页有扎实的理解。

悬停阴影框动画

虚拟机中已提供了index.html和style.css。

要在文本悬停时在其周围创建一个阴影框，请执行以下步骤：

1. 设置transform: perspective(1px)，通过影响 Z 平面与用户之间的距离，为元素赋予 3D 空间，并设置translateZ(0)，以便在 3D 空间中沿 z 轴重新定位p元素。
2. 使用box-shadow使框透明。
3. 通过使用transition-property属性，为box-shadow和transform启用过渡效果。
4. 使用:hover、:active和:focus伪类选择器，应用新的box-shadow和transform: scale(1.2)来更改文本的比例。
5. 将类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 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了悬停阴影框动画实验。你可以在 LabEx 中练习更多实验来提升你的技能。