主要實現(xiàn)了三步, 1,繪制button > 2,繪制半透明背景 > 繪制圓圈及旋轉(zhuǎn)動畫
效果預(yù)覽
1, html中? 通過loading類名來完成加載動畫的顯示隱藏
2,css中
第一步: button的默認(rèn)定義,?
這地方注意點,需要加定位, 其他的則是普通樣式代碼
第二步: 半透明背景設(shè)置,?
這里使用偽元素來添加一個半透明背景, 寬高使用position來實現(xiàn)寬高和button大小一致
第三步: 加載時候的旋轉(zhuǎn)圓圈
也是使用了偽元素來實現(xiàn), 圈圈的繪畫, 及使用了animation來完成圈圈的旋轉(zhuǎn)動作
這樣簡單的一個加載中效果就實現(xiàn)了
