<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; } a{ text-decoration: none; color: #03e9f4; } a{ position: relative; display: inline-block; padding: 30px; margin: 50px; text-transform:uppercase; letter-spacing:40px; overflow: hidden; } a:nth-child(1){ -webkit-filter: hue-rotate(270deg); filter: hue-rotate(270deg); } a:nth-child(2){ filter:hue-rotate(110deg); } a>span{ display: block; position: absolute; } a>span:nth-child(1){ width: 100%; height: 2px; top: 0; left: 0; background: linear-gradient(90deg,transparent,#03e9f4); animation: span1 1s linear infinite; } a>span:nth-child(2){ width: 2px; height: 100%; top: -100%; right: 0; background: linear-gradient(180deg,transparent,#03e9f4); animation: span2 1s 0.25s linear infinite; } a>span:nth-child(3){ width: 100%; height: 2px; right: 0; bottom:0; background: linear-gradient(270deg,transparent,#03e9f4); animation: span3 1s .5s linear infinite; } a>span:nth-child(4){ width: 2px; height: 100%; left: 0; bottom:-100%; background: linear-gradient(360deg,transparent,#03e9f4); animation: span4 1s .75s linear infinite; } .button-list{ overflow: hidden; } @keyframes span1 { 0%{ left:-100% } 50%,100%{left:100%} } @keyframes span2 { 0%{ top:-100% } 50%,100%{top:100%} } @keyframes span3 { 0%{ right:-100% } 50%,100%{right:100%} } @keyframes span4 { 0%{ bottom:-100% } 50%,100%{bottom:100%} } </style></head><body> <div class="button-list"> <a href=""> <span></span> <span></span> <span></span> <span></span> button </a> <a href=""> <span></span> <span></span> <span></span> <span></span> button </a> <a href=""> <span></span> <span></span> <span></span> <span></span> button </a> </div></body></html>
直接复制上面html代码，看效果
