CSS效果：菜单栏悬浮图片效果

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;
}

效果：

CSS效果：菜单栏悬浮图片效果

猜你喜欢