用惊艳的 CSS 动画提升网页效果

简介

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) 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平面与用户之间的距离，为元素赋予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中练习更多实验来提升你的技能。