HTML CSS JS 实现页面分割效果

最新推荐文章于 2023-12-07 09:43:02 发布

原创最新推荐文章于 2023-12-07 09:43:02 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#HTML CSS JS

js 同时被 3 个专栏收录

46 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了一个分页页面的设计，使用HTML、CSS和JavaScript实现页面的动态效果。页面分为左右两部分，每部分都有独特的背景图片和按钮，当鼠标悬停在左或右部分时，会触发过渡动画，改变页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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">
    <title>分页页面</title>
    <style>
        :root{
            --container-bg-color:#333;
            --left-bg-color:rgba(233,39,39,0.7);
            --right-bg-color:rgba(43,43,43,0.8);
            --left-button-hover-color:rgba(161,11,11,0.3);
            --right-button-hover-color:rgba(92,92,92,0.3);
            --hover-width:75%;
            --other-width:25%;
            --speed:1s;
        }
        html,body{
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .container{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: var(--container-bg-color);
        }
        .split{
            position: absolute;
            width:50%;
            height: 100%;
            overflow: hidden;
        }
        .split.left{
            left: 0;
            background: url('./img/left.png') no-repeat center center;
            background-size: cover;
        }
        .split.right{
            right: 0;
            background: url('./img/right.png') no-repeat center center;
            background-size: cover;
        }
        /* 添加伪类 */
        .split.left::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--left-bg-color);
        }
        .split.right::before{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--right-bg-color);
        }
        h1{
            font-size: 4rem;
            color: #fff;
            position: absolute;
            left: 50%;
            transform: translate(-50%);  /* 水平居中 */
            white-space: nowrap;    /* 不换行 */
            top: 20%;
         }
         .button{
             display: block;
             position: absolute;
             left: 50%;
             transform: translate(-50%);
             top: 40%;
             height: 2.5rem;
             padding-top: 1.3rem;
             width:15rem;
             text-align: center;
             color: #fff;
             border: 0.2rem solid #fff;
             font-size: 1rem;
             font-weight: bold;
             text-decoration: none;
             text-transform: uppercase;   /* 大写内容 */
         }
         .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);
         }
         /* 过渡动画 */
         .split.left, .split.right, .split.left::before, .split.right::before{
             transition: var(--speed) all ease-in-out;
         }

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

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

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

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

         /* 响应式 */
         @media (max-width:800px) {
             h1{
                 font-size: 2rem;
             }
             .button{
                 width: 12rem;
             }
         }
    </style>
</head>
<body>
    <div class="container">
        <div class="split left">
            <h1>The Designer</h1>
            <a href="#" class="button">Read More</a>
        </div>
        <div class="split right">
            <h1>The Programmer</h1>
            <a href="#" class="button">Read More</a>
        </div>
    </div>
    <script>
        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");
        });
    </script>
</body>
</html>

效果展示：