css动画-滚动出现效果

Joyce Lee

已于 2024-08-01 08:47:29 修改

阅读量1.1k

点赞数 4

CC 4.0 BY-SA版权

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

于 2024-07-31 16:59:37 首次发布

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

css 同时被 2 个专栏收录

3 篇文章

订阅专栏

动画

2 篇文章

订阅专栏

效果

效果如下：

随着画面滚动，元素逐渐显示出现在屏幕中。

核心代码

1.设置出现动画效果

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.5;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

2.为block元素绑定动画

.block {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

源码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            text-align: center;
        }


        @keyframes appear {
            from {
                opacity: 0;
                scale: 0.5;
            }

            to {
                opacity: 1;
                scale: 1;
            }
        }

        .view {
            margin: 50px 200px;
            display: grid;
            grid-template-columns: 30% 40% 30%;
            grid-row-gap: 120px;
            grid-column-gap: 20px;
        }

        .block {
            width: 90%;
            border: 2px solid #000;
            height: 40vh;

            animation: appear linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }

        .block:nth-child(5n) {
            background-color: #f0643f;
        }

        .block:nth-child(5n-1) {
            background-color: #9e64f1;
        }

        .block:nth-child(5n-2) {
            background-color: #1254c9;
        }

        .block:nth-child(5n-3) {
            background-color: #14c17d;
        }

        .block:nth-child(5n-4) {
            background-color: #fcc64e;
        }
    </style>
</head>

<body>
    <h1>Animate On Scroll</h1>
    <div class="view">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</body>

</html>