设计方式通过伪元素、动画与层级展示 另外旋转 伪元素内容的方式实现!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/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 classmain button classbutton边框按钮span classbtton2/span/button /div /body /html