实现效果:
html结构:
PS: mx、mb 是全局设置margin相关样式,自行调节
<el-button
v-for="item in list"
:key="item.id"
type="danger"
plain
@click="toLink(item.value)"
class="mx-1 mb-2 btn"
>
<div class="border-custom"></div>
<div class="border-custom"></div>
<div class="border-custom"></div>
<div class="border-custom"></div>
{{ item.title }}
</el-button>
css样式:
// 按钮样式
/deep/.btn {
position: relative;
width: fit-content;
height: 32px;
line-height: 13px;
color: #ff5e79;
background: #fff2f5;
font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
border-radius: 2px;
border: none;
padding: 8px;
overflow: hidden;
&:hover {
background: #ff5e79;
color: #fff;
}
&:focus {
background: #ff5e79;
color: #fff;
}
&:active {
background: #ff5e79;
color: #fff;
}
}
// 边框样式
.border-custom {
position: absolute;
background: #ff5e79;
}
.border-custom:nth-child(1) {
width: 100%;
height: 2px;
top: 0;
left: -100%;
animation: animate1 4s linear infinite;
animation-delay: 0s;
}
.border-custom:nth-child(2) {
width: 2px;
height: 100%;
top: -100%;
right: 0;
animation: animate2 4s linear infinite;
animation-delay: 1s;
}
.border-custom:nth-child(3) {
width: 100%;
height: 2px;
bottom: 0;
right: -100%;
animation: animate3 4s linear infinite;
animation-delay: 2s;
}
.border-custom:nth-child(4) {
width: 2px;
height: 100%;
bottom: -100%;
left: 0;
animation: animate4 4s linear infinite;
animation-delay: 3s;
}
// 动画效果
@keyframes animate1 {
0% {
left: -100%;
}
25% {
left: 0;
}
50%,
100% {
left: 100%;
}
}
@keyframes animate2 {
0% {
top: -100%;
}
25% {
top: 0;
}
50%,
100% {
top: 100%;
}
}
@keyframes animate3 {
0% {
right: -100%;
}
25% {
right: 0;
}
50%,
100% {
right: 100%;
}
}
@keyframes animate4 {
0% {
bottom: -100%;
}
25% {
bottom: 0;
}
50%,
100% {
bottom: 100%;
}
}