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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
node中实现删除目录的几种方法
2019/06/24 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python 项目目录结构设置
2020/02/14 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
C#笔试题
2015/07/14 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
益达广告词
2014/03/14 职场文书
党日活动总结
2014/05/07 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
寒假安全保证书
2015/02/28 职场文书
2015元旦感言
2015/12/09 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS