设计方式：通过伪元素、动画与层级展示 ，另外旋转 伪元素内容的方式实现；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ background: #000; } .main { text-align: center; } .button{ margin: 100px; padding: 25px; color: #0ebeff; font-size: 24px; border: none; outline: none; z-index: 1; border-radius: 10px; /* outline:4px solid #fff; */ position: relative; overflow: hidden; background-color: #0ebeff; } button::after{ 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; } .btton2::after { content: ""; position: absolute; /* background-color: #008c8c; */ background-color: #000; width: calc(100% - 4px); height: calc(100% - 4px); left: 2px; top: 2px; border-radius: 10px; z-index: -1; } @keyframes rotate { to { transform: rotate(360deg) } } </style> </head> <body> <div class="main"> <button class="button">边框按钮<span class="btton2"></span></button> </div> </body> </html>
