简介
在本实验中，我们将深入探讨 CSS 编程的世界，并探索各种技术来增强网页的设计和布局。通过一系列练习和挑战，你将学习如何使用 CSS 选择器、属性和值来设置 HTML 元素的样式，并创建视觉上吸引人的网页。在实验结束时，你将在 CSS 编程方面打下坚实的基础，并能够应用你新获得的知识来创建令人惊叹的网站。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
甜甜圈加载指示器
虚拟机中已经提供了 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 中练习更多实验来提升你的技能。