最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯html+css实现Element loading效果代码示例
时间：2022-06-25 17:50:17 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下纯html+css实现Element loading效果代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
效果图
分析
动画由两部分组成：
蓝色的弧线由点伸展成一个圆，又从圆收缩成一个点。
圆的父节点带着圆旋转
代码
html
css
默认样式
.box {
background: wheat;
}
.box .circle {
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round;
}
添加动画效果
/* 旋转动画 */
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
/* 弧线动画 */
/* 125 是圆的周长 */
@keyframes circle {
0% {
/* 状态1: 点 */
stroke-dasharray: 1 125;
stroke-dashoffset: 0;
}
50% {
/* 状态2: 圆 */
stroke-dasharray: 120, 125;
stroke-dashoffset: 0;
}
to {
/* 状态3: 点（向旋转的方向收缩） */
stroke-dasharray: 120 125;
stroke-dashoffset: -125px;
}
}
.box {
/* ...同上 */
animation: rotate 2s linear infinite;
}
.circle {
/* ...同上 */
animation: circle 2s infinite;
}
最后把背景去掉
相关文章
- 快对app怎么开小窗 快对作业开悬浮窗步骤一览 04-24
- 异环新手攻略 异环入门玩法与快速上手指南 04-24
- 快手电脑版网页版极速入口-快手电脑版网页版高清在线 04-24
- 异环手机版上线时间 异环手机版什么时候上线及最新进展 04-24
- wland网站入口地址在哪-wland网站入口地址直达 04-24
- 火车票卧铺余票怎么查-12306火车票余票查询通道 04-24