效果图如下：

在这里插入图片描述

代码如下：

<!DOCTYPE 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">
    <title>Split Landing Page</title>
</head>

<body>
    <div class="container">
        <div class="split left">
            <h1>热辣火锅</h1>
            <a href="#" class="button">去吃火锅</a>
        </div>
        <div class="split right">
            <h1>滋味烧烤</h1>
            <a href="#" class="button">想吃烧烤</a>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>

:root{
    --container-bg-color:#333;
    --left-bg-color:rgba(223, 39, 39, 0.2);
    --left-button-hover-color:rgba(161, 11, 11, 0.3);
    --right-bg-color:rgba(43, 43, 43, 0.2);
    --right-button-hover-color:rgba(92, 92, 92, 0.3);
    --hover-width:85%;
    --other-width:15%;
    --speed:1000ms;
}

html,body{
    padding: 0;
    margin: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

h1{
    font-size: 4rem;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.button{
    display: block;
    position: absolute;
    left: 50%;
    top: 40%;
    height: 2.5rem;
    padding-top: 1.3rem;
    width: 15rem;
    text-align: center;
    color: #fff;
    border: #fff solid 0.2rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    transform: translateX(-50%);
}

.container{
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--container-bg-color);
}

.split{
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.split.left{
    left: 0;
    background: url("img/hot-pot.jpeg") no-repeat center center/cover;
}

.split.left::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--left-bg-color);
}

.split.right{
    right: 0;
    background: url("img/barbecue.jpeg") no-repeat center center/cover;
}

.split.right::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--right-bg-color);
}

/* mouseenter left */
.hover-left .left{
    width: var(--hover-width);
}

.hover-left .right{
    width: var(--other-width);
}

.hover-left .right::before{
    z-index: 2;
}

/* mouseenter right */
.hover-right .right{
    width: var(--hover-width);
}

.hover-right .left{
    width: var(--other-width);
}

.hover-right .left::before{
    z-index: 2;
}

/* transition */

.split.left, .split.right, .split.right::before,
.split.left::before{
    transition: all var(--speed) ease-in-out;
}

/* button hover */

.split.left .button:hover{
    background-color: var(--left-button-hover-color);
    border-color: var(--left-button-hover-color);
}

.split.right .button:hover{
    background-color: var(--right-button-hover-color);
    border-color: var(--right-button-hover-color);
}

@media(max-width: 800px) {
    h1{
        font-size: 3rem;
    }

    .button{
        width: 12rem;
    }
}

@media(max-height: 700px){
    .button{
        top: 70%;
    }
}

const left = document.querySelector('.left');
const right = document.querySelector('.right');
const container = document.querySelector('.container');

left.addEventListener('mouseenter', () => {
    container.classList.add("hover-left");
})

left.addEventListener('mouseleave', () => {
    container.classList.remove("hover-left");
})

right.addEventListener('mouseenter', () => {
    container.classList.add("hover-right");
})

right.addEventListener('mouseleave', () => {
    container.classList.remove("hover-right");
})