css3 中实现炫酷的loading效果


Posted in HTML / CSS onApril 26, 2019

•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用

•js需要引入jquery 只用到了一点点js

•先看效果图

css3 中实现炫酷的loading效果

html:

<div class="box">
        <div class="master">
            <div class="eyes">
                <div class="eyes-ball"></div>
            </div>
            <div class="mouth"></div>
        </div>
        <div class="master blue">
            <div class="eyes">
                <div class="eyes-ball"></div>
            </div>
            <div class="mouth"></div>
        </div>
    </div>
    <div class="model">
        <div class="master">
            <div class="eyes">
                <div class="eyes-ball"></div>
            </div>
            <div class="mouth"></div>
        </div>
        <div class="loading">
            <div class="loading-bar"></div>
        </div>
        <div class="jz-loading">加载中 . . .</div>
    </div>

css:

 

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 100%, 80%, 0.5);
    display: flex;
    justify-content: center;
    align-items:center;
}
.box{
    display: flex;
}
.master{
    width:110px;
    height:100px;
    border-radius: 20px;
    background: red;
    margin:10px;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0,0,0,.5);
    position: relative;
    animation: jumping 0.8s infinite;
    transition: all 0.5s;
}
.master .eyes{
    width:35%;
    height:35%;
    border-radius:50%;
    background-color:#fff;
    display: flex;
    justify-content: center;
    align-items:center;
}
.eyes-ball{
    width:30%;
    height:30%;
    border-radius: 50%;
    background-color: #000;
    animation: eyesmove 1.6s linear infinite alternate;
}
.master .mouth{
    width:40%;
    height:10px;
    border-radius:12px;
    background-color:blue;
    margin-top: 20px;
}
.master.blue{
    background-color: blue;
    animation-delay: 0.4s;
}
.master.blue .mouth{
    background: red;
}
.master::before,
.master::after{
    content:'';
    display: block;
    width: 12px;
    height: 20px;
    border-radius: 12px 12px 0 0;
    background: #fff;
    position: absolute;
    top: -15px;
    transform: translateX(-6px) rotate(45deg);
    transform-origin: 100% 100%;
}
.master::after{
    transform:translateX(6px) rotate(-45deg);
    transform-origin: 0 100%;
}

/*****遮罩层*****/
.model{
    position: fixed;
    width: 100%;
    height: 100%;
    background: palevioletred;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.loading{
    width: 200px;
    height: 10px;
    border-radius:12px;
    background-color: #fff;
    margin-top: 50px;
    overflow: hidden;
}
.loading .loading-bar{
    width: 0%;
    height: 10px;
    background: red;
}
.jz-loading{
    color: blue;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(100px);
}
.move{
    transform: scale(0.1) rotate(360deg);
}
/*****动画*****/
@keyframes jumping{
    0%{
        top:0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    }
    50%{
        top:-50px;
        box-shadow: 0 100px 20px rgba(0, 0, 0, .3);
    }
    100%{
        top:0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .5);
    }
}
@keyframes eyesmove{
    0%{
        transform: translateX(-100%);
    }
    10%{
        transform: translateX(-100%);
    }
    90%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(100%);
    }
}

js:

var timer =null;
var add =0;
timer=setInterval(()=>{
    add++;
    $('.loading-bar').css('width',`${add}%`);
    if(add>=100){
        $('.model .master').addClass('move');
        $('.model').fadeOut();
        clearInterval(timer);
        timer =null;
    }
},30)

总结

以上所述是小编给大家介绍的css3 中实现炫酷的loading效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 #HTML / CSS
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
实例讲解JavaScript截取字符串
2018/11/30 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
什么是lambda函数
2013/09/17 面试题
竞选班长演讲稿
2013/12/30 职场文书
季度思想汇报
2014/01/01 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
土地转让协议书范本
2014/04/15 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
2014年征兵标语
2014/06/20 职场文书
领导班子在批评与自我批评座谈会上的发言
2014/09/28 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电