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来制作消息提醒框
Jul 12 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 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+xslt在windows平台上
2006/10/09 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
python实现的系统实用log类实例
2015/06/30 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
自立自强的名人事例
2014/02/10 职场文书
信息技术教学反思
2014/02/12 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
暑期社会实践感言
2014/02/25 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
协议书模板
2014/04/23 职场文书
教师节大会主持词
2015/07/06 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python