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%); } }