HTML+CSS简单实现页面滚动

最新推荐文章于 2024-04-25 20:22:26 发布

somesbody

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量366

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/woloveself/article/details/131462721

版权

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面滚动</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
</head>
<body>
    <section id="page-1" class="page">
        <h1>第一页</h1>
        <p>内容....</p>
        <div>
            <a href="#page-2" class="btn">
                下一页
                <i class="fas fa-arrow-circle-down"></i>
            </a>
        </div>
    </section>
    <section id="page-2" class="page">
        <h1>第二页</h1>
        <p>内容....</p>
        <div>
            <a href="#page-1" class="btn btn-dark">
                上一页
                <i class="fas fa-arrow-circle-up"></i>
            </a>
            <a href="#page-3" class="btn">
                下一页
                <i class="fas fa-arrow-circle-down"></i>
            </a>
        </div>
    </section>
    <section id="page-3" class="page">
        <h1>第三页</h1>
        <p>内容....</p>
        <div>
            <a href="#page-2" class="btn btn-dark">
                上一页
                <i class="fas fa-arrow-circle-up"></i>
            </a>
            <a href="#page-4" class="btn">
                下一页
                <i class="fas fa-arrow-circle-down"></i>
            </a>
        </div>
    </section>
    <section id="page-4" class="page">
        <h1>第四页</h1>
        <p>内容....</p>
        <div>
            <a href="#page-3" class="btn btn-dark">
                上一页
                <i class="fas fa-arrow-circle-up"></i>
            </a>
        </div>
    </section>
</body>
</html>

CSS:

:root{
    --page-1-color:steelblue;
    --page-2-color:tan;
    --page-3-color:teal;
    --page-4-color:tomato;
    ---animate-speed: 1s;
}
html{
    scroll-behavior: smooth;
}
body{
    line-height: 1.4;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
}
/* page color */
#page-1{background: var(--page-1-color);}
#page-2{background: var(--page-2-color);}
#page-3{background: var(--page-3-color);}
#page-4{background: var(--page-4-color);}
/*  */
.page{
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/*  */
section h1{
    font-size: 4rem;
    line-height: 1.2;
    margin: 1rem;
}
section p{
    font-size: 1.3rem;
}
section .btn{
    display: inline-block;
    padding: 1rem 1.5rem;
    border: none;
    text-decoration: none;
    margin-top: 1rem;
    font-size: 1.1rem;
    background-color: #fff;
    transition: all 0.5s ease-in;
}
section .btn:hover{
    color: white;
    background: #000;
}
/* 动画 */
#page-1 h1{
    transform: translateY(-1200px);
    animation: heading var(---animate-speed)
    forwards ease-in 1s;
}
#page-1 p{
    transform: translateX(-1600px);
    animation: text var(---animate-speed) forwards
    ease-in 2s;
}
@keyframes heading {
    to{
        transform: translateY(0);
    }
}
@keyframes text {
    to{
        transform: translateX(0);
    }
}

效果图：