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"> <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet"> <title>Document</title> </head> <body> <ul> <li> <a href="#"> <span>Home</span> <span>Home</span> </a> </li> <li> <a href="#"> <span>about</span> <span>about</span> </a> </li> <li> <a href="#"> <span>servers</span> <span>servers</span> </a> </li> <li> <a href="#"> <span>team</span> <span>team</span> </a> </li> <li> <a href="#"> <span>contact</span> <span>contact</span> </a> </li> <li> <a href="#"> <span>fatality</span> <span>fatality</span> </a> </li> </ul> </body> </html>
css:
body{ margin: 0; padding:0; display: flex; justify-content: center; align-items: center; min-height:100vh; width:100%; font-family: 'Do Hyeon', sans-serif; background:#353b48; } ul{ margin: 0; padding:0; display: flex; } ul li{ position: relative; list-style: none; margin:0 10px; } ul li a{ position: relative; height:30px; display: block; text-decoration: none; overflow: hidden; text-transform: uppercase; font-weight: 700; } ul li a span{ width:100%; height:100%; display: block; font-size:28px; transition: 0.3s; color:#718093; } ul li a span:nth-child(2){ color:#FFF; } ul li:hover a span:nth-child(1){ transform: translateY(-100%); } ul li:hover a span:nth-child(2){ transform: translateY(-100%); } ul li::before{ content: ""; position: absolute; top:-90px; left:-65px; width:200px; height:200px; background:#fff; z-index:-1; opacity: 0; transition: 0.4s; transform: translateY(100px); } ul li:hover::before{ opacity: .7; transition-delay: 0.3s; transform: translateY(0px); } ul li:nth-child(1)::before{ background: url(./img/7.png); background-size:cover; } ul li:nth-child(2)::before{ background: url(./img/8.png); background-size:cover; } ul li:nth-child(3)::before{ background: url(./img/9.png); background-size:cover; } ul li:nth-child(4)::before{ background: url(./img/10.png); background-size:cover; } ul li:nth-child(5)::before{ background: url(./img/11.png); background-size:cover; } ul li:nth-child(6)::before{ background: url(./img/12.png); background-size:cover; }
效果: