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

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

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

简介

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css(("`CSS`")) -.-> css/CSSPreprocessorsGroup(["`CSS Preprocessors`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/DynamicStylingGroup -.-> css/animations("`Animations`") css/CSSPreprocessorsGroup -.-> css/mixins("`Mixins`") subgraph Lab Skills css/selectors -.-> lab-35168{{"`打造视觉吸引力网页的CSS基础`"}} css/display_property -.-> lab-35168{{"`打造视觉吸引力网页的CSS基础`"}} css/animations -.-> lab-35168{{"`打造视觉吸引力网页的CSS基础`"}} css/mixins -.-> lab-35168{{"`打造视觉吸引力网页的CSS基础`"}} end

交替文本

虚拟机中已经提供了index.htmlstyle.css

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

  1. 创建一个<span>元素,其类名为“alternating”,id为“alternating - text”,用于容纳要交替显示的文本:
<p>
  I love coding in <span class="alternating" id="alternating - text"></span>.
</p>
  1. 在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;
  }
}
  1. 在JavaScript中,定义一个包含要交替显示的不同单词的数组,并使用第一个单词初始化<span>元素的内容:
const texts = ["Java", "Python", "C", "C++", "C#", "Javascript"];
const element = document.getElementById("alternating - text");

let i = 0;
element.innerHTML = texts[0];
  1. 使用EventTarget.addEventListener()'animationiteration'事件定义一个事件监听器。每当动画的一次迭代完成时,这将运行事件处理程序。在事件处理程序中,使用Element.innerHTMLtexts数组中的下一个元素显示为<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 教程