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不透明度实例讲解
Apr 26 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5 新事件 小结
Jul 16 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 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
克隆一个新项目的快捷方式
2013/04/10 PHP
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
深入探讨前端框架react
2015/12/09 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python字符串的一些操作方法总结
2019/06/10 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Django实现跨域请求过程详解
2019/07/25 Python
Django实现分页显示效果
2019/10/31 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
开业庆典答谢词
2014/01/18 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
财务内勤岗位职责
2014/04/17 职场文书
2014年材料员工作总结
2014/11/19 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
Golang 入门 之url 包
2022/05/04 Golang