body {
background:#000;
}
.div5 {
width:219px;
line-height:60px;
text-align:center;
position:relative;
color:#cccccc;
border-radius:20px;
transition:all .3s;
}
.div5::after {
content:"免费试用";
position:absolute;
top:0;
left:50%;
color:transparent;
transform:translate(-50%);
background:linear-gradient(90deg,#FFFF00,#9B30FF,#9AFF9A,#00FFFF);
-webkit-background-clip:text;
clip-path:circle(10px at 0% 50%);
animation:move 5s infinite;
}
.div5::before {
content:"";
position:absolute;
top:-6px;
left:-6px;
right:-6px;
bottom:-6px;
border:6px solid;
border-image-slice:1;
animation:div5Ani 3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
border-image-source:linear-gradient(to left,#27FE03,rgba(255,255,255,0));
clip-path:inset(0 0 98% 0 round 10px);
}
@keyframes div5Ani {
0%,100% {
border-image-source:linear-gradient(to bottom,#27FE03,rgba(255,255,255,0));
clip-path:inset(0 98% 0 0 round 10px);
}
35% {
border-image-source:linear-gradient(to left,#27FE03,rgba(255,255,255,0));
clip-path:inset(0 0 98% 0 round 10px);
}
50% {
border-image-source:linear-gradient(to top,#27FE03,rgba(255,255,255,0));
clip-path:inset(0 0 0 97% round 10px);
}
90% {
border-image-source:linear-gradient(to right,#27FE03,rgba(255,255,255,0));
clip-path:inset(94% 0 0 0 round 10px);
}
}/*聚光灯运动*/
@keyframes move {
0% {
clip-path:circle(10px at 0% 50%);
}
50% {
clip-path:circle(10px at 100% 50%);
}
100% {
clip-path:circle(10px at 0% 50%);
}
}