复刻MIUI传输数据时的等待图标#有趣的加载icon-2
原创
上一集，我们使用HTML+CSS复刻了MIUI的加载时的icon，如果想看上一集，请点此跳转。本集来复刻一下MIUI另外一个数据传输icon，如果你有更好的想法，一起在评论区玩耍吧！
一、原效果
找了半天也忘了这个加载动画哪里容易截图了，后来在小米穿戴中迁移小米运动数据找到了，嘿嘿，题外话：新版小米穿戴比小米运动好看多了。
写文章时发现电脑管家——个人中心页面也是同样的加载图标（如下图）
二、实现效果
偷懒啦，没录视频，截张图好了，如果您需要跑的话，复制源码到本地创建html文件运行即可。
三、实现源码
如果直接用的话，改: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>
html {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
overflow: hidden;
}
/* 以上元素定义为了居中而已，可忽略 */
:root {
/* 设置icon大小 */
--size: 64px;
/* 设置动画速度 */
--rate: 2s;
/* 设置环颜色 */
--main-color: #1d1d1f;
/* 设置中心颜色 */
--center-color: #ffffff;
}
/* 最底层元素，底部大圆 */
.mi-transfer {
position: relative;
height: var(--size);
width: var(--size);
background-color: var(--main-color);
animation: rotate-full var(--rate) linear infinite;
z-index: 1;
}
/* 中层元素，一个小圆 */
.mi-transfer::before {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: calc(var(--size) - (var(--size) / 5));
width: calc(var(--size) - (var(--size) / 5));
z-index: 2;
}
/* 顶层元素，一条横杠 */
.mi-transfer::after {
z-index: 3;
height: 100%;
width: calc(var(--size) / 6);
left: 50%;
top: 0;
transform: translateX(-50%);
}
.mi-transfer,
.mi-transfer::before {
border-radius: 50%;
}
.mi-transfer::before,
.mi-transfer::after {
position: absolute;
content: '';
background-color: var(--center-color);
}
/* 动画 */
@keyframes rotate-full {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="mi-transfer"></div>
</body>
</html>四、实现思路
其实和第一个思路差不多一样，都是三层结构：
第一层是最低层画一个圆；
第二层是画一个比第一个圆小且颜色不同且居中的圆；
第三层是画一个一定宽度（宽度可以自己把握，我只是随意调了一下）、100%高度的长方体，此长方体的颜色与第二层圆的颜色相同。
最后设置好动画转起来即可。
五、不足之处
其实放大官方的图标可以看清楚，环的断开处的端点也是有圆角的，通过我这个方法来弄简单粗暴但是没有圆角，放大之后没官方的舒服好看，如果您有更好的解决办法，欢迎在评论区写下您的想法。
六、有趣的加载icon系列
这个系列是我突发奇想弄出来的，主要是通过HTML+CSS来做一些加载动画的icon，这期为第二期，将会不定时加更。
第一期（MIUI加载icon复刻）传送门：https://cloud.tencent.com/developer/article/1869962
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
