首先说一下原理：
1：一个大的标签包着4个小标签
2：给小标签给上属性
3：让一边一个小标签
4：用css动画让它们动起来（每个动画只设置0%和100%为的是让他们“跑起来”而且还简单方便）
5：给大标签加上overflow — hidden（让他们只在大标签上显示）
6:让他们的，高不到他们动的时候变零，轮到他们的时候赋高，宽
7：css倒影属性
background: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>流光按钮</title> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Surprise</title> </head> <style> @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #050801; font-family: 'Raleway', sans-serif; font-weight: bold; } a { position: relative; display: inline-block; padding: 25px 30px; margin: 40px 0; color: #03e9f4; text-decoration: none; text-transform: uppercase; transition: 0.5s; letter-spacing: 4px; overflow: hidden; margin-right: 50px; } a:hover { background: #03e9f4; color: #050801; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4; -webkit-box-reflect: below 1px linear-gradient(transparent, #0005); } a:nth-child(1) { filter: hue-rotate(270deg); } a:nth-child(2) { filter: hue-rotate(110deg); } a span { position: absolute; display: block; } a span:nth-child(1) { top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #03e9f4); animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { left: -100%; } 50%, 100% { left: 100%; } } a span:nth-child(2) { top: -100%; right: 0; width: 2px; height: 100%; background: linear-gradient(180deg, transparent, #03e9f4); animation: animate2 1s linear infinite; animation-delay: 0.25s; } @keyframes animate2 { 0% { top: -100%; } 50%, 100% { top: 100%; } } a span:nth-child(3) { bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation: animate3 1s linear infinite; animation-delay: 0.50s; } @keyframes animate3 { 0% { right: -100%; } 50%, 100% { right: 100%; } } a span:nth-child(4) { bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(360deg, transparent, #03e9f4); animation: animate4 1s linear infinite; animation-delay: 0.75s; } @keyframes animate4 { 0% { bottom: -100%; } 50%, 100% { bottom: 100%; } } img { width: 100vw; height: 100vh; position: absolute; display: none; } </style> <body> <a href="#" onclick="FullScreen()"> <span></span> <span></span> <span></span> <span></span> Neon button </a> <!-- 换成自己的或者 http://zhangtong.kuxia.top --> <img src="img/学习视频.gif" alt=""> </body> <script> function FullScreen() { setTimeout(function () { let domElement = document.documentElement; if (domElement.requestFullscreen) { domElement.requestFullscreen(); } else if (domElement.mozRequestFullScreen) { domElement.mozRequestFullScreen(); } else if (domElement.webkitRequestFullScreen) { domElement.webkitRequestFullScreen(); } let img = document.getElementsByTagName('img')[0]; img.style.display = 'block' }, 0) }; </script> </html> </body> </html>
