甜甜圈旋转加载动画
创建一个甜甜圈形状的旋转加载动画,可用于指示内容的加载。
- 为整个元素使用半透明的
border。排除一侧,它将作为甜甜圈的加载指示器。 - 定义并使用合适的动画,使用
transform: rotate()旋转元素。
<body>
<div class="donut"></div>
<style>
@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;
}
</style>
</body>
这个技巧利用了几个关键的 CSS 属性和技术:
- border 属性用于创建甜甜圈的基本形状。通过将 border-color 设置为半透明的颜色,我们创建了一个"镂空"的效果。
- border-left-color 属性被设置为
