参考:
Clip-path实现按钮流动边框动画_在线clip-path-CSDN博客
https://www.5axxw.com/questions/simple/9ju5yt#google_vignette
<div class="bottom-top-item-centent bottom-top-item-left">
<vue-seamless-scroll :data="listLeftData" :class-option="defaultLeftOption">
<ul class="ul-scoll">
<li v-for="(item, index) in listLeftData" :key='index'>
<span class="title">{{ item.title }}</span>
<span class="date">{{ item.time }}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
.bottom-top-item-left {
width: 94%;
height: 130px;
overflow: hidden;
border: 1px solid #283dff;
// animation: border-flow 2s linear infinite;
position: relative;
transition: all .5s;
.ul-scoll {
padding: 10px;
margin: 0 auto;
border: 2px solid transparent;
/* 背景不重复 */
li {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px;
padding: 2px;
color: #fff;
font-size: 14px;
// background: rgba(198, 142, 226, 0.2);
}
&:last-child {
padding: 0;
li {
&:last-child {
// padding: 0 2px;
padding-bottom: 0;
margin: 0 4px;
}
&:first-child {
margin-top: 0;
}
}
}
}
&::after,
&::before {
content: "";
position: absolute;
border: 2px solid rgb(216, 125, 13);
width: 99%;
height: 126px;
// border-radius: 10px;
/* 简写为 */
inset: 0px;
/* 添加动画 */
animation: pathRotate 3s infinite linear;
}
&::before {
// border-color: rgb(250, 255, 192);
border-color: #0efcff;
}
@keyframes pathRotate {
0%,
100% {
clip-path: inset(0 0 98% 0);
// border-image: linear-gradient(to right, #f0c3e3 0%, #8ec5fc 100%);
// border-image-slice: 1;
}
25% {
clip-path: inset(0 98% 0 0);
// border-image: linear-gradient(to right, #8ec5fc 0%, #f0c3e3 100%);
// border-image-slice: 1;
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
&::after {
animation-delay: -1.5s;
}
&:hover {
filter: brightness(1.5);
}
}
// @keyframes border-flow {
// 0% {
// border-left-color: #000;
// border-top-color: #afc;
// }
// 25% {
// border-top-color: transparent;
// border-right-color: #afc; //#bcf;
// }
// 50% {
// border-right-color: transparent;
// border-bottom-color: #afc; // pink;
// }
// 75% {
// border-bottom-color: transparent;
// border-left-color: #afc; // #dcf;
// }
// 100% {
// border-left-color: transparent;
// border-top-color: #afc; // hotpink;
// }
// }