.button {
width: 50px;
height: 50px;
background-color: red;
margin-left: 40px;
position: relative;
z-index: 1;
overflow: hidden;
&::before {
content: "";
width: 200%;
height: 200%;
position: absolute;
left: 50%;
top: 50%;
z-index: -2;
background-color: #3b41c5;
animation: rotate 3s linear infinite;
transform-origin: 0 0;
}
&::after {
content: "";
width: calc(100% - 2px);
height: calc(100% - 2px);
position: absolute;
left: 1px;
top: 1px;
background-color: red;
z-index: -1;
}
}
@keyframes rotate {
to {
transform: rotate(1turn);
}
}
按钮或盒子边框走马灯效果
最新推荐文章于 2024-07-05 16:13:36 发布