MIUI加载时的等待图标#有趣的加载icon-1

原创

逝水经年

修改于 2021-08-31 03:00:39

1K0

文章被收录于专栏：数据可视化数据可视化

最近突发奇想，想用html+css来做一些加载图标，计划做成一个系列吧。这第一集，就从MIUI开始，先来复刻一下MIUI的加载时的icon。

一、原效果

为了这个效果我可是把手机分身给删了~（希望大家看过可以点一个小小的赞）

二、实现效果

三、源码

如果直接用的话，改:root选择器里面的值即可，有注释，调试一下就能得到自己想要的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Copyright" content="entireyu@jniantic.cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            /* 设置图形大小 */
            --size: 64px;
            /* 设置循环速度 */
            --rate: 1.5s;
            /* 环颜色 */
            --main-color: #1d1d1f;
            /* 背景音乐 */
            --center-color: #ffffff;
        }
        /* 最低层元素 */
        .mi-loading{
            position: relative;
            height: var(--size);
            width: var(--size);
            z-index: 1;
            /* 旋转动画设置 */
            animation: ani var(--rate) linear infinite;
        } 
        /* 姑且叫做中层元素吧 */
        .mi-loading::before{
            height: calc(var(--size) - (var(--size) / 6));
            width: calc(var(--size) - (var(--size) / 6));
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: var(--center-color);
            border-radius: 50px;
            z-index: 2;
        }
        /* 这个是最上层元素 */
        .mi-loading::after{
            height: calc(var(--size) / 4.5);
            width: calc(var(--size) / 4.5);
            top: calc(var(--size) / 6);
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
        }
        .mi-loading::before, .mi-loading::after{
            content: '';
            position: absolute;
        }
        .mi-loading , .mi-loading::after{
            background-color: var(--main-color);
            border-radius: 50px;
        }
        /* 旋转的动画 */
        @keyframes ani {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="mi-loading"></div>
</body>
</html>