效果图：
CSS
<style> * { margin: 0; padding: 0; background-color: black; } button { color: aqua; font-size: 20px; background-color: black; border: none; outline: none; z-index: 1; border-radius: 10px; /* outline: 4px solid white; */ width: 100px; height: 50px; position: relative; overflow: hidden; margin-top: 200px; margin-left: 45%; } button::before { content: ''; position: absolute; background-color: red; width: 200%; height: 200%; z-index: -2; left: 50%; top: 50%; transform-origin: 0 0; animation: rotate 3s infinite linear; } button::after { content: ''; position: absolute; background-color: black; z-index: -1; width: calc(100% - 4px); height: calc(100% - 4px); left: 2px; top: 2px; border: 10px; } @keyframes rotate { to { transform: rotate(1turn); } } </style>
HTML:
<body> <p>按钮边框旋转效果</p> <button>按钮</button> </body>
