效果：
思路：使用伪元素，给伪元素设置背景色，然后定位，遮盖，旋转。就可以实现旋转边框效果。
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> body { background: #000; } button { margin: 50px 40%; width: 200px; height: 80px; color: #fff; font-size: 24px; background: #000; border: none; outline: none; z-index: 1; border-radius: 10px; cursor: pointer; position: relative; overflow: hidden; } button::before { content: ""; width: 200px; height: 200px; position: absolute; background: orange; z-index: -2; left: 50%; top: 50%; transform-origin: left top; animation: rotating 2s linear infinite; } button::after { content: ""; position: absolute; --g: 4px; width: calc(100% - var(--g) * 2); height: calc(100% - var(--g) * 2); background: #000; left: var(--g); top: var(--g); border-radius: inherit; z-index: -1; } @keyframes rotating { to { transform: rotate(360deg); } } </style> </head> <body> <button>按钮</button> <script></script> </body> </html>
