标签：动画 Loading 样式 svg stroke loading border rotate CSS

CSS 实战: Loading 动画

文章目录

• CSS 实战: Loading 动画
• 正文
• • 1. html 结构
  • 2. div 实现样式
  • 3. svg 实现样式
  • 4. 实现效果
• 其他资源
• • 参考连接
  • 完整代码示例

正文

1. html 结构

这里一共实现两种 loading 图样，一个使用 <div> 标签，一个则是 svg 的 <circle> 元素

<div class="loading-css"></div>
<svg viewBox="0 0 50 50" class="loading-svg">
  <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
</svg>

区别在于对于普通 div 元素我们只能使用 border 属性来控制四个方位的边界，使用 svg 标签我们则可以利用 strokeArray 来构建任意造型的转菊花线条

2. div 实现样式

关于 div 实现的样式可想而知就是 border + animation 的组合

.loading-css {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 5px solid #f3f3f3;
  border-top: 5px solid red;
  border-radius: 50%;
  /* 动画旋转效果 */
  animation: rotate-360 1s infinite linear;
}

@keyframes rotate-360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

3. svg 实现样式

svg 就比较有趣了，分为 svg 根元素整体旋转，以及里面的圆圈随时间修改虚线样式

.loading-svg {
  width: 50px;
  height: 50px;
  animation: loading-rotate 1.5s infinite ease-in-out;
}

@keyframes loading-rotate {
  to {
    transform: rotate(1turn);
  }
}

.loading-svg > .path {
  stroke: #409eff;
  stroke-width: 5;
  animation: loading-dash 1.5s infinite ease-in-out;
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 125;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 95, 31;
    stroke-dashoffset: -31px;
  }

  to {
    stroke-dasharray: 6, 120;
    stroke-dashoffset: -120px;
  }
}

4. 实现效果

其他资源

参考连接

Title	Link
很久以前看到的，忘记参考的大哥的链接了，看到的话留个言给你补上hh

完整代码示例

https://github.com/superfreeeee/Blog-code/tree/main/front_end/css/css_loading

标签：动画,Loading,样式,svg,stroke,loading,border,rotate,CSS
来源： https://blog.csdn.net/weixin_44691608/article/details/121091627

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。