css3个性loading,css3 中实现炫酷的loading效果

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

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

•先看效果图

html：

加载中 . . .

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效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！