HTML代码
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <a href="#"> <span></span> <span id="1"></span> <span></span> <span id="2"></span> Button </a> </body> </html>
CSS代码
body{ margin: 0; padding:0; background:#2f3640; } a{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#1670f0; font-size:60px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; box-shadow: 0 40px 100px rgba(0, 0, 0, .5); padding:30px; overflow: hidden; } a::before{ content: ""; position: absolute; top:2px; left:2px; bottom:2px; width:50%; background:rgba(255, 255, 255, .05) } a span:nth-child(1){ position: absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(to right,#2f3640,#1779ff); animation: animate1 1s linear infinite; } @keyframes animate1{ 0%{ transform: translateX(-100%); } 100%{ transform: translateX(100%); } } a span:nth-child(2){ position: absolute; top:0; right:0; width:4px; height:100%; background:linear-gradient(to bottom,#2f3640,#1779ff); animation: animate2 1s linear infinite; animation-delay: 0.5s; } @keyframes animate2{ 0%{ transform: translateY(-100%); } 100%{ transform: translateY(100%); } } a span:nth-child(3){ position: absolute; bottom:0; right:0; width:100%; height:4px; background:linear-gradient(to left,#2f3640,#1779ff); animation: animate3 1s linear infinite; } @keyframes animate3{ 0%{ transform: translateX(100%); } 100%{ transform: translateX(-100%); } } a span:nth-child(4){ position: absolute; bottom:0; left:0; width:4px; height:100%; background:linear-gradient(to top,#2f3640,#1779ff); animation: animate4 1s linear infinite; animation-delay: 0.5s; } @keyframes animate4{ 0%{ transform: translateY(100%); } 100%{ transform: translateY(-100%); } }
JS代码(为了解决刚打开网页线条全部存在问题)
var one = document.getElementById("1"); var two = document.getElementById("2"); one.style.visibility = "hidden"; two.style.visibility = "hidden"; window.setTimeout(function(){ one.style.visibility = "visible"; two.style.visibility = "visible"; },500)
最终效果如图: