效果就是这样
主要思路：利用index设置不同层，然后使他的背景旋转
<div class="btn"> <span>秘密武器开发者中心</span> </div>
css如下
<style>
.btn {
width: 150px;
height: 40px;
padding: 8px;
border-radius: 5px;
position: relative;
overflow: hidden;
cursor: pointer;
margin: 40px auto;
;
}
.btn span {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
text-align: center;
color: #333;
}
.btn::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background-color: red;
z-index: -2;
left: 50%;
top: 50%;
animation: rotate 4s linear infinite;
transform-origin: left top;
}
.btn::after {
content: '';
--w: 2px;
position: absolute;
top: var(--w);
left: var(--w);
border-radius: inherit;
width: calc(100% - 2 * var(--w));
height: calc(100% - 2*var(--w));
background: #fefefe;
z-index: -1;
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
</style>