动画与过渡效果

介绍

在热闹的“宠物之家”世界中，这是一个为宠物爱好者打造的虚拟庇护所，富有创意的网页设计师 Taylor 踏上了一段旅程，为网站注入生机。

本实验使用 CSS 动画和过渡效果来增强用户体验，使网站信息丰富、引人入胜且充满活力。Taylor 的目标是将静态元素转化为互动功能，吸引访客，引导他们在宠物护理的数字领域中开启一段难忘的旅程。

伪元素

在宠物页面的导航栏中，当你将鼠标悬停在导航项上时，该导航项下方会出现一条下划线。

我们应该思考一下，这个效果的显示和隐藏是如何实现的？

CSS 的 ::after 伪元素是一个强大的工具，它允许开发者在选定元素的内容之后插入额外的内容或装饰。这种方法可以用于各种设计和布局任务，例如添加装饰性元素、创建清晰的布局分隔，或在无需修改 HTML 结构的情况下插入内容。以下是一个关于如何使用 CSS ::after 伪元素的教程。

::after 是一个伪元素，它允许你在元素内容的末尾插入额外的内容。默认情况下，这些内容是一个内联元素。

selector::after {
  /* CSS 属性 */
}

使用 content 属性来指定要插入的内容。这可以是文本、图像或其他 CSS 属性。

例如，在 <p> 元素后添加一个红色的心形：

我们可以通过 ::after 实现下划线效果，只需在 CSS 中添加以下内容：

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

目前，页面没有任何变化，因为宽度为 0。接下来，我们将使用 :hover 来实现下划线效果，当鼠标悬停在元素上时，将宽度更改为 100%。

伪类

CSS 的 :hover 伪类选择器用于选择鼠标指针悬停在其上的元素。这使开发者能够为用户交互提供视觉反馈，例如改变颜色、大小或添加动画，从而增强用户体验。

selector:hover {
  /* CSS 属性 */
}

例如，要在鼠标指针悬停在 <button> 元素上时改变其颜色，可以使用以下 CSS：

现在我们已经知道如何使用 :hover，可以在 style.css 中添加以下内容：

.navigation li:hover::after {
  width: 100%;
}

到目前为止，我们已经实现了鼠标悬停在导航项上时出现下划线的效果。然而，细心的同学可能会发现，下划线的出现效果可以更加平滑。接下来，我们将介绍另一个 CSS 属性来实现这一效果。

过渡效果

CSS 过渡允许你在从一种样式更改为另一种样式时添加效果，而无需使用 Flash 动画或 JavaScript。你可以指定过渡的持续时间，以及通过计时函数定义过渡发生的方式。

CSS 的 transition 属性是以下四个过渡相关属性的简写：

• transition-property：指定过渡效果所针对的 CSS 属性名称。
• transition-duration：定义过渡的持续时间。
• transition-timing-function：描述过渡在其持续时间内如何进行。
• transition-delay：指定过渡开始前的延迟时间。

例如，以下 CSS 代码定义了一个过渡效果，将元素的背景颜色从 aqua 更改为 rgb(145, 255, 0)，持续时间为 1 秒：

现在我们已经知道如何使用 transition，可以在 style.css 中添加以下内容：

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

透明度

当你将鼠标移动到显示区域的图像上时，图像的透明度会增加，并且其下方会显示文字。

CSS 的 opacity 属性用于设置元素的不透明度级别。通过该属性，你可以控制元素及其子元素的透明度，使元素完全透明、完全不透明或介于两者之间的任何透明度级别。透明度值的范围从 0（完全透明）到 1（完全不透明）。该属性在创建淡入淡出效果、突出交互元素或设计具有层次感的界面时非常有用。

selector {
  opacity: value; /* 值范围为 0（完全透明）到 1（完全不透明） */
}

现在我们已经知道如何使用 opacity，可以在 style.css 中添加以下内容：

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

透明度增加的效果已经实现。接下来，我们为交互添加一些平滑效果。

变换效果

CSS 的 transform 属性允许你旋转、缩放、倾斜或平移元素，从而改变元素的形状和位置，而不会影响页面的布局。这是创建动态视觉效果和复杂动画的强大工具。

transform 属性包括以下函数：

• rotate()：旋转元素，参数为旋转角度（例如，rotate(45deg) 表示旋转 45 度）。
• scale()：缩放元素，参数为缩放比例（例如，scale(2) 表示将大小加倍）。
• translate()：平移元素，参数为沿 X 轴和 Y 轴移动的距离（例如，translate(50px, 100px) 表示向右移动 50px，向下移动 100px）。
• skew()：倾斜元素，参数为沿 X 轴和 Y 轴的倾斜角度（例如，skew(30deg, 20deg) 表示沿 X 轴倾斜 30 度，沿 Y 轴倾斜 20 度）。

例如，将 <p> 元素沿 X 轴向右移动 100 像素。

现在我们已经知道如何使用 transform，可以在 style.css 中添加以下内容：

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

层级控制

CSS 的 z-index 属性用于控制页面上元素的垂直堆叠顺序。当元素重叠时，z-index 决定了哪个元素应该显示在最上层。它只能应用于定位元素，即那些具有 position 属性值为 relative、absolute、fixed 或 sticky 的元素。z-index 的值可以是正数、负数或 0，其中较大的值意味着该元素将位于具有较小值的元素之上。

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

例如，假设有两个重叠的元素，我们可以使用 z-index 来控制哪个元素显示在最上层：

现在我们已经知道如何使用 z-index，可以在 style.css 中添加以下内容：

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

实现关键帧动画

当我们进入网站时，欢迎页面上会有一个淡入动画。

CSS 动画是一种强大的工具，允许开发者在不使用 JavaScript 的情况下为网页元素创建动画效果。通过 CSS 动画，你可以定义一系列动画，将元素从一种样式状态过渡到另一种样式状态。

CSS 动画主要依赖于两个关键部分：@keyframes 规则和动画属性。

• @keyframes 规则：定义动画序列中的关键帧。每个关键帧描述了动画在特定时刻的样式。
• animation 属性：将定义的 @keyframes 应用于选择器，并设置动画的持续时间、延迟、迭代次数等。

例如：

现在我们已经知道如何使用动画，可以在 style.css 中添加以下内容：

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature .cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

总结

在本实验中，Taylor 成功地将 CSS 动画和过渡效果应用到了 "Pet's House" 网站中，创造了一个生动且具有互动性的用户体验。从静态页面到动态交互的转变，展示了细微视觉提示在增强网站导航和用户参与度方面的强大作用。通过动画和过渡效果，Taylor 让 "Pet's House" 的数字空间对每位访客都更具吸引力和记忆点。