We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
题目:
请使用纯 CSS 实现 .btn 按钮的 loading 动画效果,效果如下图:
.btn
相关的 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); } }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
题目:
请使用纯 CSS 实现
.btn
按钮的 loading 动画效果,效果如下图:相关的 CSS 和 HTML 已写好:
参考答案:
The text was updated successfully, but these errors were encountered: