css3 中实现炫酷的loading效果
发布时间：2019-04-26 11:08:41 作者：佚名 
我要评论
我要评论今天实现了一个炫酷的loading效果，基本全用css来实现，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
•今天实现了一个炫酷的loading效果，基本全用css来实现，主要练习一下css3的熟练运用
•js需要引入jquery 只用到了一点点js
•先看效果图
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效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这是一个实现两款炫酷的css3 loading预加载样式，通过简单的布局和CSS代码，来制作效果非常炫酷的loading预加载特效，欢迎下载2019-01-31
这是一组超酷的CSS3 loading加载动画特效，共有4种不同的效果，分别通过不同的CSS3 keyframes帧动画来完成，欢迎下载2019-01-08
今天给大家分享的是一款漩涡样式的CSS3 Loading加载动画，它在加载的时候就像一个炫酷在旋转，同时中间有一个loading字样表示在加载内容。有需要的朋友可以直接下载使用2018-12-03
这是一款基于纯CSS3实现的方块翻转效果的Loading加载动画，若干个小方块组成一个阵列，然后各自按指定方向翻转，这样循环后就形成了Loading加载的动画效果。有需要的朋友可2018-11-29
css3绘制六边形缩放加载动画特效。有需要的朋友可以直接下载使用2018-11-01
css3绘制彩虹弹簧式加载效果代码。有需要的朋友可以直接下载使用2018-09-25
这是一款基于CSS3+SVG实现S形进度条加载动画效果源码。画面中一个类似蛇形管道的S形状进度条呈现出从左上方0%进度加载过渡到100%的进度。并如此循环往复2018-07-09
纯CSS3模拟Windows XP开机加载动画界面loading效果源码
这是一款基于纯CSS3模拟Windows XP开机加载动画界面loading效果源码。采用纯css3模拟出Windows XP开机启动时的logo图标与底部进度条滚动加载的动画效果2018-07-06
纯css3绘制扁平化的谷歌loading加载图标动画特效。图标有六个大小颜色各异，非常炫酷。有需要的朋友可以直接下载使用2018-07-06
最新评论