可以极致优化!谁看谁迷糊啊!视频审核中先发个图片了。
走马灯的搜索框
HTML
<input name="CPN1" type="text" id="CPN1" value="" class="" placeholder="R1PN/R3PN/DPN/Description" >
CSS
@keyframes borderColorAnimation {
0% {
border-image-source: linear-gradient(to right, #f00, #f00);
}
25% {
border-image-source: linear-gradient(to right, #f00, #ff0);
}
50% {
border-image-source: linear-gradient(to right, #ff0, #0df);
}
75% {
border-image-source: linear-gradient(to right, #0df, Magenta);
}
100% {
border-image-source: linear-gradient(to right, Magenta, #f00);
}
}
input:focus {
border: 2px solid #d700ff;
border-radius: 0;
border-image-slice: 1;
animation: borderColorAnimation 5s ease-in-out infinite;
}