上一集,我们使用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%高度的长方体,此长方体的颜色与第二层圆的颜色相同。
最后设置好动画转起来即可。
其实放大官方的图标可以看清楚,环的断开处的端点也是有圆角的,通过我这个方法来弄简单粗暴但是没有圆角,放大之后没官方的舒服好看,如果您有更好的解决办法,欢迎在评论区写下您的想法。
这个系列是我突发奇想弄出来的,主要是通过HTML+CSS来做一些加载动画的icon,这期为第二期,将会不定时加更。
第一期(MIUI加载icon复刻)传送门:https://cloud.tencent.com/developer/article/1869962
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。