Html
    Css
    Js

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

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css跑马灯边框动画

0