cover

两分钟，学会给网页添加加载动画

小伙伴们，你们好，我是小周，好奇网站加载动画是怎么实现的，于是就查了一下，没想到如此简单，快来跟着小周魔鬼的步伐学习一下吧！

王子周棋洛

7979人浏览 · 2022-05-20 09:06:00

王子周棋洛 · 2022-05-20 09:06:00 发布

小伙伴们，你们好，我是小周，好奇网站加载动画是怎么实现的，于是就查了一下，没想到如此简单，快来跟着小周魔鬼的步伐学习一下吧！
在这里插入图片描述

1.准备动画
这里小伙伴们如果有自己心仪的动画，就使用自己喜欢的♥，如果没有我给小伙伴准备了一个网站点击进入选择加载动画
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载动画</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* From uiverse.io by @satyamchaudharydev */
        .spinner {
            --size: 30px;
            --first-block-clr: #005bba;
            --second-block-clr: #fed500;
            --clr: #111;
            width: 100%;
            min-height: 100vh;
            background-color: rgb(242, 242, 242);
        }

        .spinner::after,
        .spinner::before {
            box-sizing: border-box;
            position: absolute;
            content: "";
            width: var(--size);
            height: var(--size);
            top: 50%;
            animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
            left: 50%;
            background: var(--first-block-clr);
        }

        .spinner::after {
            background: var(--second-block-clr);
            top: calc(50% - var(--size));
            left: calc(50% - var(--size));
            animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
        }

        @keyframes down {

            0%,
            100% {
                transform: none;
            }

            25% {
                transform: translateX(100%);
            }

            50% {
                transform: translateX(100%) translateY(100%);
            }

            75% {
                transform: translateY(100%);
            }
        }

        @keyframes up {

            0%,
            100% {
                transform: none;
            }

            25% {
                transform: translateX(-100%);
            }

            50% {
                transform: translateX(-100%) translateY(-100%);
            }

            75% {
                transform: translateY(-100%);
            }
        }
    </style>

</head>

<body>
    <div class="spinner"></div>
</body>

</html>

2.添加网站内容
这里简单引入一张图片，为了达到延时的效果，我是用这个网站免费的图片接口点击进入

<div class="continer">
    <img src="https://picsum.photos/1250/650" alt="">
</div>

把图片居中

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

3.添加js，完成目标
逻辑很简单，动画初始化是播放的，使用 onload 事件，当页面全部加载完成时，把动画隐藏，内容显示，这样网站加载动画就完成了！是不是很棒呢🤏🏼

<script>
    // 获取动画
    let loader = document.querySelector(".spinner");
    // 加载完成事件
    window.onload = function () {
        // 加载完成，隐藏动画，显示内容
        loader.style.display = "none";
    }
</script>

4.完整代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载动画</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* From uiverse.io by @satyamchaudharydev */
        .spinner {
            --size: 30px;
            --first-block-clr: #005bba;
            --second-block-clr: #fed500;
            --clr: #111;
            width: 100%;
            min-height: 100vh;
            background-color: rgb(242, 242, 242);
        }

        .spinner::after,
        .spinner::before {
            box-sizing: border-box;
            position: absolute;
            content: "";
            width: var(--size);
            height: var(--size);
            top: 50%;
            animation: up 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
            left: 50%;
            background: var(--first-block-clr);
        }

        .spinner::after {
            background: var(--second-block-clr);
            top: calc(50% - var(--size));
            left: calc(50% - var(--size));
            animation: down 2.4s cubic-bezier(0, 0, 0.24, 1.21) infinite;
        }

        @keyframes down {

            0%,
            100% {
                transform: none;
            }

            25% {
                transform: translateX(100%);
            }

            50% {
                transform: translateX(100%) translateY(100%);
            }

            75% {
                transform: translateY(100%);
            }
        }

        @keyframes up {

            0%,
            100% {
                transform: none;
            }

            25% {
                transform: translateX(-100%);
            }

            50% {
                transform: translateX(-100%) translateY(-100%);
            }

            75% {
                transform: translateY(-100%);
            }
        }
    </style>

</head>

<body>
    <div class="spinner"></div>
    <div class="continer">
        <img src="https://picsum.photos/1250/650" alt="">
    </div>
    <script>
        // 获取动画
        let loader = document.querySelector(".spinner");
        // 加载完成事件
        window.loader = function () {
            // 加载完成，隐藏动画，显示内容
            loader.style.display = "none";
        }
    </script>
</body>

</html>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从K8s的“临时容器”看K8s设计的厉害之处

华为云开发者联盟

cover

一步即扫，直达应用所有服务

华为云开发者联盟

cover

仓颉编程语言技术指南：嵌套函数、Lambda 表达式、闭包

华为云开发者联盟

所有评论(0)

查看更多评论

王子周棋洛

已为社区贡献4条内容