第 46 期(W3C标准-CSS-动画)：按钮loading动画效果 #49
Description
题目：
请使用纯 CSS 实现 .btn 按钮的 loading 动画效果，效果如下图：
相关的 CSS 和 HTML 已写好：
.btn {
display: inline-block;
padding: .5em 1.2em;
font-size: 14px;
color: #fff;
background: #369;
border: 0;
border-radius: 5px;
}
/* 请补充 loading 动画的 CSS 实现 */<button class="btn">确定</button>
<button class="btn loading">确定</button>参考答案：
.btn.loading {position: relative;}
.btn.loading:first-line {color: transparent;}
.btn.loading::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 4px;
height: 4px;
margin: auto;
animation: spinZoom 1s steps(8) infinite;
border-radius: 100%;
box-shadow: 0 -10px 0 1px currentColor,
10px 0 currentColor,
0 10px currentColor,
-10px 0 currentColor,
-7px -7px 0 .5px currentColor,
7px -7px 0 1.5px currentColor,
7px 7px currentColor,
-7px 7px currentColor;
}
@keyframes spinZoom {
0% {
transform: scale(.75) rotate(0);
}
100% {
transform: scale(.75) rotate(360deg);
}
}