loading动画css3动画

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Loading-study</title><link rel="stylesheet" href="index.css">
</head>
<body><!-- 左边的字的部分 --><div class="title"><h2 class="monsterText">Hello <br>monster jumping!!</h2><h3 class="opText">We'are eating it.</h3></div><!-- 右边的小怪物 --><!-- first monster --><div class="monster"><div class="eye"><div class="eyeball"></div></div><div class="mouth"></div></div><!-- second monster  两只小怪物的背景不一样的所以加上blue的背景样式--><div class="monster blue"><div class="eye"><div class="eyeball"></div></div><div class="mouth"></div></div><!-- Loading的部分，loading的部分和上面的小怪物的画面是同级 --><div class="pageLoading"><div class="monster"><div class="eye"><div class="eyeball"></div></div><div class="mouth"></div></div><!-- 下面是加载条 --><div class="loading"><div class="bar"></div></div></div><script src="jquery.js"></script><script src="loading.js"></script>
</body>
</html>

css部分

*{margin:0;padding:0;
}
html,body{width:100%;height:100%;background-color: #DB4D6D;display: flex;justify-content: center;align-items: center;
}
.title{color:#fff;
}
.monster{width:110px;height:100px;background-color: #e55a54;border-radius:20px;position: relative;display: flex;justify-content: center;align-items: center;margin: 10px;flex-direction: column;box-shadow:0px 10px 20px rgba(0,0,0,0.2);animation: jump 0.8s infinite alternate;
}@keyframes jump{50%{top:0;box-shadow: 0px 10px 20px rgba(0,0,0,0.2);}100%{top:-50px;box-shadow: 0px,120px,50px rgba(0,0,0,0.2);}
}.monster .eye{width:50%;height:50%;border-radius:50%;background-color: #fff;display: flex;justify-content: center;align-items: center;
}.monster .eyeball {width:50%;height:50%;border-radius: 50%;background-color: #0C4475;animation: eyemove 1.6s infinite alternate;
}@keyframes eyemove{0%,10%{transform: translate(50%);}90%,100%{transform: translate(-50%);}
}.monster .mouth{width:32%;height:12px;background-color: #fff;margin-top: 15%;border-radius:12px;
}.monster:before,
.monster:after{content: '';display: block;width:20%;height:10px;position:absolute;left:50%;top:-10px;background-color: #fff;border-radius: 10px;
}.monster:after{transform: translateX(-70%) rotate(45deg);
}
.monster:before{transform: translateX(-30%) rotate(-45deg);
}.monster.blue{background-color: #0C4475;animation-delay: 0.5s;
}.monster.blue .mouth,
.monstre.blue .eyeball{background-color: #e55a54;
}.pageLoading {position: fixed;width:100%;height:100%;left:0;top:0;display: flex;justify-content: center;align-items: center;background-color: #0C4475;flex-direction: column;transition: opacity 0.5s 0.5s;
}.pageLoading.complete {opacity: 0;
}.pageLoading.complete .monster {transition: 0.5s;transform: scale(0.01) rotate(360deg);
}
.loading {width:200px;height:8px;margin-top:80px;border-radius: 5px;background-color: #fff;overflow: hidden;transition: 0.5s;
}
.loading .bar {background-color: #e55a54;width:0%;height:100%;
}

js部分

var i = 0;
var timer = setInterval(function(){$('.bar').css("width",i + "%");i += 1;if(i > 100){$(".pageLoading").addClass("complete");setTimeout(function (){$(".monsterText").html("We are<br>SQUARE<br>MONSTER!");},5000);clearInterval(timer);}
},30);

loading动画css3动画相关推荐

css雪碧图动画,CSS3动画——雪碧图的实现
前言作为一个前端的初学者,现在好像已经在nodejs上越跑越偏,之前一直崇拜的CSS3和HTML5动画,如今也好久没有管.因为之前学了好多知识点,但是没有系统的进行总结,就从这篇文章开始,对一些碎片 ...
css图形动画,CSS3动画（1）：transform实现cube动画
除了可以利用焦点图来展示图片,我们还可以运用CSS3动画来展示图片.今天就给大家带来cube动画. 效果: cube.gif (是不是很好玩呢?o(▽)o) 制作思路:制作两个面,分别位于正前面(面1 ...
css3 slide动画,css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work)
css3动画+ slidetoggle不起作用(css3 animation + slidetoggle don't work) 飞机动画块(他从一边到另一边飞行 - 永远). 可以使用jquery折 ...
CSS3流程动画,css3动画和vue动画
transfrom : 转换 1.translate : translate(x,y)有两个值,第一个是x轴,第二个是y轴 2.rotate: rotate(XXdeg) deg值为你要旋转的角度 3 ...
css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下: 鼠标跟随导航效果效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标 ...
html逐帧动画,CSS3动画之逐帧动画_html/css_WEB-ITnose
要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画. 看一下维基百科中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果. 简而言之,实现逐帧动 ...
css沿曲线进行动画,CSS3动画-animation-波浪曲线
CSS 语言: CSSSCSS 确定 body { background: rgb(0, 171, 217) } .quxian { height: 300px; width: 100%; posit ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...

loading动画css3动画

loading动画css3动画相关推荐

最新文章

热门文章