哈喽啊,中秋刚过,今天是国庆节啦,祝祖国生日快乐。突然想起中秋是不是可以做一些特殊的加载icon,于是写下了这篇文章,最后的效果可能不是很好,希望后续可以调的更好。
月亮的阴晴圆缺可以用两个圆来进行实现。
一个圆作为月亮的颜色,另外一个圆作为和背景颜色相同的一个遮罩。
通过这两个圆的相切相交重合我们可以简单的模拟月亮从月牙到满月的过程。
<!DOCTYPE html>
<html lang="zh-cn">
<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>月亮加载动画demo</title>
<style>
html,body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
:root{
/* 月亮的大小 */
--moon-size: 256px;
/* 月白色 */
--moon-color: rgb(215,236,241);
/* 网页背景色 */
--web-bg: #fff;
}
/* loading元素居中 */
.container{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/* 超出的遮罩层隐藏 */
.loading-area{
position: relative;
overflow: hidden;
}
/* 图形区域大小一致 */
.loading-area, .loading-area .moon, .loading-area .mask{
width: var(--moon-size);
height: var(--moon-size);
border-radius: 50%;
}
/* 月亮的背景颜色 */
.loading-area .moon{
background-color: var(--moon-color);
}
/* 遮罩 */
.loading-area .mask{
position: absolute;
right: 0;
top: 0;
background-color: var(--web-bg);
animation: moonAni 3s linear infinite alternate;
}
@keyframes moonAni {
/* 月牙 */
0%,10%{
right: -20%;
}
/* 满月 */
90%,100%{
right: -100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="loading-area">
<div class="moon"></div>
<div class="mask"></div>
</div>
</div>
</body>
</html>
这个加载icon系列已经第三集啦,希望大佬们路过可以点个赞。
如果能分享一下您的想法,就更好啦~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。