运用 CSS 技术实现视觉吸引力的设计

简介

在本实验中，我们将深入探讨 CSS 编程的世界，并探索各种技术来增强网页的设计和布局。通过一系列练习和挑战，你将学习如何使用 CSS 选择器、属性和值来设置 HTML 元素的样式，并创建视觉上吸引人的网页。在实验结束时，你将在 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/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/colors -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/borders -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/width_and_height -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/display_property -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/animations -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/transformations -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} css/mixins -.-> lab-35192{{"用 CSS 技术打造视觉吸引力的设计"}} end

甜甜圈加载指示器

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

为了表示内容正在加载，创建一个甜甜圈加载指示器，整个元素使用半透明的 border。排除一侧作为甜甜圈的加载指示器。然后，定义并使用适当的动画，使用 transform: rotate() 来旋转元素。以下是 HTML 和 CSS 的示例代码：

HTML：

<div class="donut"></div>

CSS：

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

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

总结

恭喜你！你已经完成了甜甜圈加载指示器实验。你可以在 LabEx 中练习更多实验来提升你的技能。