09.甜甜圈旋转加载动画 & 计数器

最新推荐文章于 2024-07-20 23:54:17 发布

@大迁世界

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量24

点赞数

分类专栏： CSS 技巧与案例详解文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq449245884/article/details/140579089

版权

CSS 技巧与案例详解专栏收录该内容

13 篇文章 0 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

甜甜圈旋转加载动画

创建一个甜甜圈形状的旋转加载动画,可用于指示内容的加载。

为整个元素使用半透明的 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 属性被设置为

了解本专栏

超级会员免费看

@大迁世界

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
09.甜甜圈旋转加载动画 & 计数器

这种甜甜圈旋转动画是一种简洁、优雅的方式来指示内容正在加载,而不会分散用户对页面内容的注意力。它是一个很好的例子,说明了如何使用纯 CSS 创建引人注目的动画效果。这种技术提供了一种灵活的方式来创建自定义的列表编号,特别适用于嵌套列表。通过改变 content 属性,你可以轻松地定制标记的样式。创建一个甜甜圈形状的旋转加载动画,可用于指示内容的加载。创建一个自定义列表计数器,可以处理嵌套的列表元素。
复制链接

扫一扫