search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

第 46 期(W3C标准-CSS-动画)：按钮loading动画效果 #49

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

题目：

请使用纯 CSS 实现 .btn 按钮的 loading 动画效果，效果如下图：

GIF

相关的 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);
  }
}