代码来自头条号"前端小智",侵权删
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; } .container{ display: flex; justify-content: center; align-items: center; } .container div{ padding: 15px 30px; position: relative; text-decoration: none; letter-spacing: 2px; text-transform: uppercase; border: 2px solid #0f0; -webkit-box-reflect: below 0px linear-gradient(transparent, #0002); color: #fff; transition: 0.5s; transition-delay: 0; } .container div span{ position: relative; z-index: 100; } .container div:hover{ color: #000; box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 40px #0f0, 0 0 60px #0f0, 0 0 80px #0f0, 0 0 160px #0f0; transition-delay: 1s; } .container div:hover:before{ width: 60%; height: 100%; left: -2px; background: #0f0; transition-delay: 0 0.5s 1s 1s; box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0; } .container div:hover:after{ width: 60%; height: 100%; right: -2px; background: #0f0; transition-delay: 0 0.5s 1s 1s; box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0; } .container div::before{ content: ""; width: 20px; height: 2px; background: #0f0; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; transition-delay: 0 0.5s 1s 0.5s; } .container div::after{ content: ""; width: 20px; height: 2px; background: #0f0; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0; transition-delay: 0 0.5s 1s 0.5s; transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s; } </style></head><body> <div class="container"> <div><span>read more</span></div> </div></body></html>