甜甜圈旋转加载动画
创建一个甜甜圈形状的旋转加载动画,可用于指示内容的加载。
- 为整个元素使用半透明的
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 属性被设置为
