CSS 实战: Loading 动画
2021/11/2 6:42:58
本文主要是介绍CSS 实战: Loading 动画,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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
这篇关于CSS 实战: Loading 动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南