使用伪类元素制作一个动态按钮：
<!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> .box{ display: flex; justify-content: space-around; align-items: center; width: 100%; height: 600px; background-color: #000; } /* 基础按钮 */ .but{ width: 200px; height: 60px; text-align: center; line-height: 60px; font-size: 24px; border: none; outline: none; z-index: 1; border-radius: 10px; /* outline: 4px solid #fff; */ color: #0ebeff; position: relative; overflow: hidden; } /* 添加伪元素 */ .but::before{ content: ''; position: absolute; background:cyan; top:50%; left: 50%; width: 200px; height:200px; z-index: -2; transform-origin: 0 0; animation: rotate 3s infinite linear; } /* 设置另一个伪元素 */ .but::after{ content: ''; position: absolute; 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(1turn); } } </style> </head> <body> <div class="box"> <div class="but"> 登录 </div> </div> </body> </html> </body> </html>
