像极了月亮的Loading

作者 : 开心源码 本文共1448个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共179人阅读

Loading

效果图

HTML结构

    <div class="demo">        <div class="demo-container">                        <div class="wch-loading">                                <span class="wch-loading-text">Loading</span>            </div>        </div>    </div>

主要由两部分组成一个是loading的主体 <div class="wch-loading"></div>和 Loading组件里的文字Loading<span class="wch-loading-text">Loading</span>,外面的demo和demo-container只是为了例子方便居中显示的才加的,和组件没有关系。

CSS结构

.wch-loading{        height: 6rem;    width: 6rem;    margin: 1.5rem 1.5rem 1.5rem 1.5rem;    background-color: #FFFF99;    border-radius: 5rem;    box-shadow:0px 0px 0.5rem 0.3rem #FFFF99;    display: flex;    text-align: center;    align-items: center;    justify-content: center;    animation: loading 2s linear infinite;     }.wch-loading-text{        height: 1.5rem;    width: 100%;    color: #800080;    font: 1rem Arial,Verdana,"宋体";    animation: loadingtext 2s linear infinite; }

CSS部分分成两部分一个是静态CSS样式的设置,还有一部分是animation动态关键帧的设置
上面这部分是静态设置
wch-loading设置了大小,背景,倒角50%成为圆形 灵感来自月亮所以特意使用box-shadow:0px 0px 0.5rem 0.3rem #FFFF99;做了月晕 ,同时设置display为flex 并设置Loading的内容元素居中。同时设置了动态关键帧 ,无限循环的线性变化,单次时间2s 。
wch-loading-text的span元素居中在上面的wch-loading中,并设置了高度与字体大小相差不大主要为了字体可以在div中居中显示。并设置了动态关键帧 ,无限循环的线性变化,单次时间配合上面也是2s 。

@keyframes  loading{    from{        height: 6rem;        width: 6rem;        box-shadow:0px 0px 0.5rem 0.3rem #FFFF99;         opacity: 1;    }    to{           height: 6rem;       width: 6rem;        box-shadow:0px 0px 0.8rem 0.5rem #FFFF99;        opacity: 0.5;    }}@keyframes loadingtext{    from{        opacity: 1;        height:1.5rem;        font: 1rem Arial,Verdana,"宋体";    }    to{        opacity: 0.5;        height: 3rem;        font: 2rem Arial,Verdana,"宋体";    }}

这部分主要是设置了动态关键帧的起始和终止帧的样式,主要设置了wch-loading的透明度和阴影,wch-loading-text的透明度和字体大小。
本文的代码可点击链接下载。

待加强的地方

组件现在没有直接的js操作api用来打开和关闭loading,现在只是显示效果。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 像极了月亮的Loading

发表回复