JS 29 - 一个 div 就能完成的发光游泳圈！

大家好！

今天我们要实作网页完全载入前的载入游泳圈！
我们进入今天的主题吧！

样式表

#loader {
    width: 10em;
    height: 10em;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 1;
}

#loader {
    background-color: #142d46;
    border-radius: 50%;
    overflow: hidden;
    animation: rotating 1s linear infinite;
}

#loader::before {
    content: '';
    display: block;
    width: 7.5%;
    height: 7.5%;
    border-radius: 50%;
    background: #00fafa;
    margin: auto;
}

#loader::after {
    content: '';
    display: block;
    width: 85%;
    height: 85%;
    background-color: #19324b;
    border-radius: 50%;
    margin: auto;
    box-shadow: -4.25em -4.625em 0em #00fafa,
                -5.5em 0em 1.25em #00fafa,
                -6.75em 4.625em 2.5em #00fafa;
}

body.loaded #loader {
    opacity: 0;
    transition: opacity 0.5s;
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

程序码

(function () {
    Felix(window).on('load', function () {
        Felix('body')[0].classList.add('loaded');
    });
})();

实测

<body>
    <div id="overlay"></div>
    <div id="loader"></div>
</body>

直接观看范例

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！


<<:  【领域展开 29 式】 认识 Google AMP

>>:  [第二十九只羊] 迷雾森林交响乐章 发牌逻辑

{CMoney战斗营} 的第十一周 #两天转换程序语言

经历了期中专题，紧接着开始分领域授课的部分： 前端 (HTML、CSS、JS) 後端 (C#) 安卓...

DAY4:安装模拟器及开启专案

接续着上一篇安装完成後，我们要来建立新专案 这是会跑出的画面，按下”New Project”。 可以...

Python的max语法

题目 2. 设计说明： 请撰写一程序，首先要求使用者输入正整数k（1 <= k <= 1...

Day30 阿里云30後结语

结语: 嗨大家，这30天的铁人赛就在今天要画上结尾了。今天就来跟各位聊聊这30天挑战的一些想法跟可以...

用 Line LIFF APP 实现信箱验证绑定功能(3) - 修改流程实现认证时效检验

因为前几天我们新增了 verification_code 这张表的栏位，调整了发送认证码的流程，并且...