代码来自头条号'前端小智',侵权删
<!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>悬停水波纹</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; } .container{ position: relative; display: flex; /* flex-direction: column; */ align-items: center; } a{ position: relative; width: 150px; height: 55px; text-align: center; line-height: 55px; margin: 10px; text-transform: uppercase; background: #191919; color: #fff; letter-spacing: 2px; text-decoration: none; overflow: hidden; } span{ position: relative; display: block; width: 100%; height: 100%; z-index: 100; transition: 0s ease-in; } a:hover span{ transition: 0.4s ease-in; transform: translateY(-100%); } a::before{ content: ""; width: 250px; height: 250px; background: #2299ff; border-radius: 50%; position: absolute; bottom: -250px; left: 50%; transform: translateX(-50%); transition: 0.4s ease-in; } a:hover::before{ bottom: -150px; } a:nth-child(2)::before{ bottom: 60px; } a:nth-child(2):hover::before { bottom: -40px; } </style></head><body> <div class="container"> <a href="#"> <!--还只能用a标签, 不然不会换行--> <span>button</span> <span>button</span> </a> <a herf="#"> <span>button</span> <span>button</span> </a> </div></body></html>