主要实现了三步, 1,绘制button > 2,绘制半透明背景 > 绘制圆圈及旋转动画
效果预览
1, html中 通过loading类名来完成加载动画的显示隐藏
2,css中
第一步: button的默认定义,
这地方注意点,需要加定位, 其他的则是普通样式代码
第二步: 半透明背景设置,
这里使用伪元素来添加一个半透明背景, 宽高使用position来实现宽高和button大小一致
第三步: 加载时候的旋转圆圈
也是使用了伪元素来实现, 圈圈的绘画, 及使用了animation来完成圈圈的旋转动作
这样简单的一个加载中效果就实现了
