09.甜甜圈旋转加载动画 & 计数器
甜甜圈旋转加载动画
创建一个甜甜圈形状的旋转加载动画,可用于指示内容的加载。
- 为整个元素使用半透明的
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 属性被设置为
原文地址：https://blog.csdn.net/qq449245884/article/details/140579089
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！