ui篇-使用html+css实现按钮加载中效果

主要实现了三步, 1,绘制button > 2,绘制半透明背景 > 绘制圆圈及旋转动画

效果预览


1, html中  通过loading类名来完成加载动画的显示隐藏


2,css中

第一步: button的默认定义, 

这地方注意点,需要加定位, 其他的则是普通样式代码

第二步: 半透明背景设置, 

这里使用伪元素来添加一个半透明背景, 宽高使用position来实现宽高和button大小一致


第三步: 加载时候的旋转圆圈

也是使用了伪元素来实现, 圈圈的绘画, 及使用了animation来完成圈圈的旋转动作


这样简单的一个加载中效果就实现了

你可能感兴趣的:(ui篇-使用html+css实现按钮加载中效果)