防抖、防重复提交、loading

html 复制代码
<!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>
</head>
<style>
    :root {
        --color: orange;
        --lineColor: rgba(102, 163, 224, .2);
    }

    body {
        /* background: #222; */
        overflow: hidden;
    }

    section {
        position: relative;
        margin: 0 auto;
        width: 200px;
        height: 200px;
    }

    section::before {
        content: '';
        position: absolute;
        height: 10px;
        width: 10px;
        border-radius: 100%;
        border-top: 1px solid orange;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -5px;
        animation: turn 1s infinite linear;
        filter:
            drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));
    }

    .box,
    .box::after,
    .box::before {
        border: 2px solid var(--lineColor);
        border-left: 2px solid var(--color);
        border-right: 2px solid var(--color);
        border-radius: 50%;
    }

    .box::after,
    .box::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
    }

    .box {
        width: 200px;
        height: 200px;
        position: relative;
        animation: turn 1s linear infinite;
        transform-origin: 50% 50%;
    }

    .box::before {
        width: 180px;
        height: 180px;
        margin-top: -90px;
        margin-left: -90px;
        animation: turn2 1.25s linear infinite;
    }

    .box::after {
        width: 160px;
        height: 160px;
        margin-top: -80px;
        margin-left: -80px;
        animation: turn 1.5s linear infinite;
    }

    .box-circle,
    .box-circle1,
    .box-circle2 {
        border: 2px solid var(--color);
        opacity: .9;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        animation: rotate 3s linear infinite;
    }

    .box-circle {
        animation-delay: 0.2s;
    }

    .box-circle1 {
        animation-delay: 1.2s;
    }

    .box-circle2 {
        animation-delay: 2.2s;
    }

    @keyframes turn {
        100% {
            transform: rotateZ(-1turn);
        }
    }

    @keyframes turn2 {
        100% {
            transform: rotateZ(1turn);
        }
    }

    @keyframes rotate {
        100% {
            border: none;
            border-top: 2px solid var(--color);
            border-bottom: 2px solid var(--color);
            transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
        }
    }
</style>

<body>
    <div id="test" style="display: none;">
        <section>
            <div class="box"></div>
            <div class="box-circle"></div>
            <div class="box-circle1"></div>
            <div class="box-circle2"></div>
        </section>
    </div>
    <button onclick="test()">防止重复提交</button>
    <script>
        function test() {
            var test = document.getElementById("test");
            // 设置遮罩样式
            test.style.position = "fixed";
            test.style.top = "0";
            test.style.left = "0";
            test.style.width = "100%";
            test.style.height = "100%";
            test.style.backgroundColor = "rgba(34, 34, 34, 0.5)";

            // 显示蒙版
            test.style.display = "block";
            
            // 在1秒后隐藏蒙版
            setTimeout(function () {
                test.style.display = "none";
            }, 1000); // 1000毫秒 = 1秒
        };

    </script>
</body>

</html>
相关推荐
低代码布道师5 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
前端小巷子6 小时前
CSS单位完全指南
前端·css
软件技术NINI6 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
NoneCoder9 小时前
HTML响应式网页设计与跨平台适配
前端·html
wsdhla11 小时前
form表单提交前设置请求头request header及文件下载
html·form·request·send·header·submit
tq108611 小时前
CSS基础
css
JavaDog程序狗11 小时前
【前端】前端 CSS 原子化,代码乐高随便搭
前端·css
ZhZhXuan13 小时前
点击按钮没反应?其实是样式bug
前端·css
yede13 小时前
使用Gird布局实现瀑布流效果
前端·javascript·css
几度泥的菜花14 小时前
优雅实现网页弹窗提示功能:JavaScript与CSS完美结合
开发语言·javascript·css