CSS 编程基础 | 网页开发 | 实验

简介

在本实验中，我们将探索 CSS（层叠样式表）编程的基础知识。本实验将涵盖 CSS 语法、选择器、属性和值的基础内容。在本实验结束时，你将在 CSS 编程方面拥有坚实的基础，并能够创建视觉上吸引人的网页。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 94%。获得了学习者 100% 的好评率。

交替文本

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

要创建交替文本动画，请执行以下步骤：

创建一个<span>元素，其类名为“alternating”，id为“alternating - text”，用于容纳要交替显示的文本：

<p>
  I love coding in <span class="alternating" id="alternating - text"></span>.
</p>

在 CSS 中，定义一个名为“alternating - text”的动画，通过设置display: none使<span>元素消失：

.alternating {
  animation - name: alternating - text;
  animation - duration: 3s;
  animation - iteration - count: infinite;
  animation - timing - function: ease;
}

@keyframes alternating - text {
  90% {
    display: none;
  }
}

在 JavaScript 中，定义一个包含要交替显示的不同单词的数组，并使用第一个单词初始化<span>元素的内容：

const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating - text");

let i = 0;
element.innerHTML = texts[0];

使用EventTarget.addEventListener()为'animationiteration'事件定义一个事件监听器。每当动画的一次迭代完成时，这将运行事件处理程序。在事件处理程序中，使用Element.innerHTML将texts数组中的下一个元素显示为<span>元素的内容：

const listener = (e) => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.addEventListener("animationiteration", listener, false);

请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新Web 8080标签页来预览网页。

总结

恭喜你！你已经完成了交替文本实验。你可以在 LabEx 中练习更多实验来提升你的技能。

打造视觉吸引力网页的 CSS 基础

简介

交替文本

总结