加载中旋转沙漏

　星云　

于 2022-06-12 21:16:13 发布

阅读量360

点赞数 7

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

本文链接：https://blog.csdn.net/dscn15848078969/article/details/125249826

版权

前端专栏收录该内容

40 篇文章 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>sandglass</title>
    <style>
        @keyframes sandglass {
            0% {
                transform: rotate(0deg);
            }

            25%, 50% {
                transform: rotate(180deg);
            }

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

        @keyframes bottom-sand {
            0% {
                transform: translateY(-30%);
            }

            50% {
                transform: translateY(0%);
            }

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

        @keyframes top-sand {
            0% {
                transform: translateY(0%);
            }

            50% {
                transform: translateY(-30%);
            }

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

            52% {
                transform: translateY(30%) translateX(100%);
            }

            53% {
                transform: translateY(30%);
            }

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

        @keyframes point {
            0% {
                opacity: 1;
            }

            50% {
                opacity: .2;
            }

            100% {
                opacity: 1;
            }
        }

        .sandglass {
            transform-origin: 0 0;
            animation: sandglass 5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
        }

        .bottom-sand {
            transform-origin: 0 0;
            animation: bottom-sand 5s ease-in-out infinite;
        }

        .top-sand {
            transform-origin: 0 0;
            animation: top-sand 5s ease-in-out infinite;
        }

        .label {
            padding: 3rem;
            padding-top: 0;
        }
        .point{
			animation-name: point;
			animation-duration: 2s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div style="width:800px;margin:auto;text-align:center;background:#222;">
        <svg style="height:300px;" viewBox="-75 -75 150 150">
            <defs>
                <clipPath id="top">
                    <path d="M 0,2.4882812 -28.052734,30.541016 V 46.480469 H 28.052734 V 30.541016 Z" />
                </clipPath>
                <clipPath id="top-sand">
                    <path class="top-sand" d="M 0,2.4882812 -28.052734,30.541016 V 46.480469 H 28.052734 V 30.541016 Z" />
                </clipPath>
                <clipPath id="bottom">
                    <path d="m -28.052734,-46.480469 v 15.939453 L 0,-2.4882812 28.052734,-30.541016 v -15.939453 z" />
                </clipPath>
                <clipPath id="bottom-sand">
                    <path class="bottom-sand" d="m -28.052734,-46.480469 v 15.939453 L 0,-2.4882812 28.052734,-30.541016 v -15.939453 z" />
                </clipPath>
            </defs>
            <g class="sandglass">
                <path fill="#fff" d="m -29.8125,-50 a 1.75945,1.75945 0 0 0 -1.759766,1.759766 V -29.8125 a 1.7596259,1.7596259 0 0 0 0.515625,1.244141 L -2.488281,1.1402179e-8 -31.056641,28.568359 A 1.7596259,1.7596259 0 0 0 -31.572266,29.8125 V 48.240234 A 1.7596259,1.7596259 0 0 0 -29.8125,50 h 59.625 a 1.7596259,1.7596259 0 0 0 1.759766,-1.759766 V 29.8125 A 1.7596259,1.7596259 0 0 0 31.056641,28.568359 L 2.488281,1.1402179e-8 31.056641,-28.568359 A 1.7596259,1.7596259 0 0 0 31.572266,-29.8125 V -48.240234 A 1.7596259,1.7596259 0 0 0 29.8125,-50 Z m 1.759766,3.519531 h 56.105468 v 15.939453 L 1.1366282e-8,-2.488281 -28.052734,-30.541016 Z M 1.1366282e-8,2.488281 28.052734,30.541016 V 46.480469 H -28.052734 V 30.541016 Z" />
                <g clip-path="url(#bottom)">
                    <g clip-path="url(#bottom-sand)">
                        <rect fill="#fff" x="-75" y="-75" width="150" height="150" />
                    </g>
                </g>
                <g clip-path="url(#top)">
                    <g clip-path="url(#top-sand)">
                        <rect fill="#fff" x="-75" y="-75" width="150" height="150" />
                    </g>
                </g>
            </g>
        </svg>
        <h2 class="label">loading
            <span class="point" style="animation-delay:.25s;">.</span>
            <span class="point" style="animation-delay:.5s;">.</span>
            <span class="point" style="animation-delay:.75s;">.</span>
        </h2>
    </div>
</body>

</html>

　星云　

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
加载中旋转沙漏

一些网站或者APP在加载新东西的时候，往往会给出一个好看有趣的Loading图，大部分的Loading样式都可以使用CSS3制作出来，它不仅比直接使用gif图简单方便，还能节省加载时间和空间。下面介绍常见的一些Loading动画效果图的制作方法。...
复制链接

扫一扫