纯 CSS 实现按钮提交等待效果, 半透明 + loading 动画 + disable, 不用任何 JS/html, 仅需一个 CSS 即可.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- Document
- </title>
- <style>
- button { opacity: 0.5; cursor: default; pointer-events: none; } button:before
- { content: ''; display: inline-block; width: 1em; height: 1em; margin-right:
- 0.5em; color: red; border: 1px solid red; border-radius: 50%; vertical-align:
- -10%; clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%); animation:
- rotate 1s linear infinite; } @keyframes rotate { from { transform: rotatez(0deg);
- } to { transform: rotatez(360deg); } }
- </style>
- </head>
- <body>
- <button>
- CSS-loading
- </button>
- </body>
- </HTML>
有趣的代码就在 代码秀 https://www.frontendjs.com/codetime
来源: http://www.qdfuns.com/article/23172/985df0279ce9f2170a49b8f94142bb52.html