动画与过渡效果

CSSCSSBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicConceptsGroup -.-> css/properties("`Properties`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") subgraph Lab Skills css/selectors -.-> lab-289073{{"`动画与过渡效果`"}} css/properties -.-> lab-289073{{"`动画与过渡效果`"}} css/box_model -.-> lab-289073{{"`动画与过渡效果`"}} css/positioning -.-> lab-289073{{"`动画与过渡效果`"}} css/pseudo_classes -.-> lab-289073{{"`动画与过渡效果`"}} css/pseudo_elements -.-> lab-289073{{"`动画与过渡效果`"}} css/animations -.-> lab-289073{{"`动画与过渡效果`"}} css/transitions -.-> lab-289073{{"`动画与过渡效果`"}} css/transformations -.-> lab-289073{{"`动画与过渡效果`"}} end

伪元素 (Pseudo Element)

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

悬停下划线导航效果

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

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

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

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

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

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

CSS after 伪元素示例

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

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

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

✨ 查看解决方案并练习

伪类 (Pseudo Class)

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

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

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

按钮悬停颜色变化

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

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

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

✨ 查看解决方案并练习

过渡 (Transition)

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

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

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

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

CSS 过渡示例动画

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

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}
✨ 查看解决方案并练习

透明度 (Opacity)

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

图像透明度悬停效果

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;
}

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

✨ 查看解决方案并练习

变换 (Transform)

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 像素。

CSS transform translate 示例

现在我们已经知道如何使用 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%);
}
✨ 查看解决方案并练习

Z-Index

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

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

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

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;
}
✨ 查看解决方案并练习

实现关键帧动画 (Keyframe Animations)

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

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

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

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

例如:

CSS 淡入动画示例

现在我们已经知道如何使用动画,可以在 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" 的数字空间对每位访客都更具吸引力和记忆点。

您可能感兴趣的其他 CSS 教程