简介
在本实验中，我们将探索各种 CSS 概念和技术，以提升网页的视觉外观。通过实际操作练习，我们将学习如何创建和修改 CSS 规则、将样式应用于 HTML 元素，以及使用 CSS 选择器来定位特定元素。在实验结束时，你将对如何使用 CSS 创建视觉上吸引人且响应式的网页有扎实的理解。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 92%。获得了学习者 100% 的好评率。
悬停阴影框动画
虚拟机中已提供了index.html和style.css。
要在文本悬停时在其周围创建一个阴影框，请执行以下步骤：
- 设置
transform: perspective(1px)，通过影响 Z 平面与用户之间的距离，为元素赋予 3D 空间，并设置translateZ(0)，以便在 3D 空间中沿 z 轴重新定位p元素。 - 使用
box-shadow使框透明。 - 通过使用
transition-property属性，为box-shadow和transform启用过渡效果。 - 使用
:hover、:active和:focus伪类选择器，应用新的box-shadow和transform: scale(1.2)来更改文本的比例。 - 将类
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 中练习更多实验来提升你的技能。