css 加载动画圆条旋转

最新推荐文章于 2024-05-14 18:01:48 发布

VIP文章吴凡吴纯洁

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量144

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_24585621/article/details/125088001

版权

在这里插入图片描述
可以旋转很炫酷
html代码

  <div class="hm-spinner"><span class="hm-spinner"></span></div>

Css

<style>
.hm-spinner {
   
  height: 420px;
  width: 420px;
  border: 8px solid transparent;
  /* border-top-color: rgb(253 234 169 / 56%);
  border-bottom-color: rgb(253 234 169 / 56%); */
    border-top-color: rgba(18, 221, 248, 1);
  border-bottom-color: rgba(18, 221, 248, 1);
  border-radius: 50%;
  position: relative;
  animation: spin 24s linear infinite;
  margin: auto;
  top: -28px;
  mix-blend-mode: overlay;
}
.hm-spinner::before,
.hm-spinner::after {
   
  content: "";
  position: absolute;
  top: 28px;
  right: 28px;
  bottom: 28px;
  left: 28px