css动画-卡片滚动效果

Joyce Lee

已于 2024-08-01 08:46:59 修改

阅读量564

点赞数 3

分类专栏： css 动画文章标签： css 前端

于 2024-07-31 16:58:40 首次发布

本文链接：https://blog.csdn.net/m0_51181022/article/details/140827341

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

动画效果

效果如下：

当卡片进行左右滚动时，每次都恰好滑动出来下一个卡片，将下一个卡片完整的展现在容器中间。

核心代码

1.设置容器和卡片的样式

.wrapper {
    display: flex;
    gap: 20px;
    width: 300px;
    margin: 100px auto;
    overflow-x: scroll;
}

.card {
    box-sizing: border-box;
    padding: 20px 30px;
    flex-shrink: 0;
    width: 300px;
    background-color: white;
    border-radius: 14px;
    text-align: center;
}

2.为容器设置 scroll-snap-type属性

.wrapper {
    scroll-snap-type: x mandatory;
}

x是指沿着X轴滚动，mandatory是若滚动容器当前未在滚动，则其可见视口必须吸附至吸附位置。。

3.为卡片设置scroll-snap-align属性

.card {
    scroll-snap-align: center;
}

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #e8e7ee;

        }

        .wrapper {
            display: flex;
            gap: 20px;
            width: 300px;
            margin: 100px auto;
            overflow-x: scroll;
            scroll-snap-type: x mandatory;

        }

        .card {
            scroll-snap-align: center;

            box-sizing: border-box;
            padding: 20px 30px;
            flex-shrink: 0;
            width: 300px;
            background-color: white;
            border-radius: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="card">
            <h2>Card 1</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 2</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 3</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 4</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 5</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 6</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 7</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 8</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 9</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
        <div class="card">
            <h2>Card 10</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim tempore commodi a recusandae aliquam est
                saepe eaque molestiae blanditiis amet suscipit iure, magnam facere, consectetur nam dolorum error
                aliquid reprehenderit.</p>
        </div>
    </div>
</body>

</html>