每月两个小小项目——CSS3实现可爱动画加载页面

最新推荐文章于 2023-04-26 11:19:47 发布

YF-SOD

最新推荐文章于 2023-04-26 11:19:47 发布

阅读量457

点赞数 1

分类专栏：小小项目文章标签： CSS3小小项目 CSS3实现可爱动画加载页面 CSS3、JS小项目 CSS3动画小项目 JS加CSS3动画小项目

本文链接：https://blog.csdn.net/AIWWY/article/details/114001210

版权

小小项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目实现图片GIF

项目思想

首先我们2个页面是通过设置absolute或fixed让一个页面，脱离文档流，并覆盖到另一个页面上面，这样就不会有滚动条。也就是说我们的loading页面要设置absolute或fixed先显示覆盖，所以我们为了方便编写应该先编写第二个页面，再编写第一个页面就是loading页面，进度条我们可以用setInterval函数设置定时器，不断增加它黑色部分的长度，当达到100%时，我们将页面1即loading页面的透明度opacity设置为0，这样第二个页面就能显示了，中间设置好过渡属性transiton，让变化不显突兀。然后跳动怪我的跳动和眼球的转动我们可以通过CSS3中的动画属性去添加。

详细版（带大量解释）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="loadingAnimation.css">
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
	/jquery-1.4.min.js"></script>
</head>
<body>
	<div class="wrapper">
		<!-- 写的时候，注意我们以loadingPage页面覆盖，loaded页面，所以我们先将loaded页面写好后再写loading页面，不然配置CSS时会影响，不好配置 -->
		<div class="loadedPage">
			<div class="context">
				<h1>Hello <br>There</h1>
				<h2>We will eat you!</h2>
			</div>
			<!-- 根据包含关系放置结构.这样做动画的时候也会比较好做，给monster增加一个动画，整个便会动起来。 -->
			<div class="monster">
				<!-- 头发用::before和::after做，像2个嘴巴一样，一个旋转30度，一个负30度，然后2个拼在一起即可。 -->
				<div class="eye">
					<div class="eyeBall"></div>
				</div>			
				<div class="mouth"></div>
			</div>
			<div class="monster blue">
				<div class="eye">
					<div class="eyeBall"></div>
				</div>			
				<div class="mouth"></div>
			</div>
		</div>
		<div class="loadingPage">
			<div class="monster">			
				<div class="eye">
					<div class="eyeBall"></div>
				</div>			
				<div class="mouth"></div>
			</div>
			<div class="loadingBar">
				<div class="black"></div>
			</div>
		</div>
	</div>
	<script src="loadingAnimation.js"></script>
</body>
</html>

CSS代码

*{
	margin: 0;
	padding: 0;
}
html,
body,
.wrapper{
	width: 100%;
	height: 100%;
	/*默认元素出生时的width都为父集的100%宽度（除body会自带8px的外边距即宽度会减少16px），高度为0，由内容撑开高度。如果不设置父集的高度，仅给后续页面添加100%高度，是占父集的100%，
	所以页面不会被撑开，设置背景颜色也不会被显示（直接给body或html设置背景颜色会生效，即使默认的高度为0，但依然会显示占满全屏，而且还包括body的外边距）。*/
}
/*由于.loadingPage是覆盖显示在.loadedPage页面上的，所以我们先写loadedPage*/
.loadedPage{
	width: 100%;
	height: 100%;
	background-color: #DB4D6D;
	/*CSS3弹性盒模型:定义.loadedPage页面下的子元素(monster和文本)出生的位置*/
	display: flex;/*定义CSS3弹性盒模型*/
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
}

/*设置2个monster*/
.monster{
	width: 110px;
	height: 100px;
	border-radius: 20px;
	background-color: #e55A54;	
	margin: 0 20px;
	/*CSS3弹性盒模型：定义monster下的子元素（即嘴巴眼睛）出生的位置*/
	display: flex;/*定义CSS3弹性盒模型*/
	justify-content: center;/*水平居中*/
	align-items: center;/*垂直居中*/
	flex-direction: column;/*按列的排列顺序,默认为行，所以文本和monster是并列的*/

	position: relative;/*用来帮助头发的定位*/
}
.monster .eye{
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background-color: #fff;
	/*居中子元素眼珠*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.monster .eye .eyeBall{
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: #0C4475; 
}
.monster .mouth{
	width: 32%;
	height: 12px;
	border-radius: 12px;
	background-color: #fff;
	margin-top: 10px;
}
.monster::before,
.monster::after{
	content: '';/*必须先设置文本内容，不然下面设置的属性无法生效*/
	display: inline-block;
	width: 20%;
	height: 10px;
	border-radius: 10px;
	background-color: #fff;
	position: absolute;
	top: -10px;	
}
.monster::before{
	transform: rotate(45deg);
	/*具体的位置是自己在浏览器中调整得到的*/
	left: 36%;
}
.monster::after{
	transform: rotate(-45deg);
	left: 44%;
}
.monster.blue{
	background-color: #0C4475;
}
.monster.blue .mouth,
.monster.blue .eye .eyeBall{
	background-color: #e55A54;
}
/*设置阴影和跳动的动画效果*/
@keyframes jumping{
/*定义动画名*/
	0%{
		top: 0;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		/*设置盒子的阴影，只设置盒子右部下部的大小，第一个参数是右部大小，第二个是下部大小，第三个是模糊距离与阴影尺寸（扩散到多大范围，指数越大越不明显），第四个是显示颜色。*/
	}
	100%{
		top: -50px;
		box-shadow: 0 100px 20px rgba(0, 0, 0, 0.2);
	}
}
.monster{
	animation: jumping 0.8s infinite alternate;
	/*绑定动画到标签上，第一个为动画名，第二个代表完成时间为多少，第三个代表完成次数，第4个代表交替完成*/
}
/*设置眼球的滚动动画效果*/
@keyframes eyeMove{
	0%,10%{
		transform: translate(50%);
	}
	/*逗号连接的2个数代表在这段时间内都停留在此属性上*/
	90%,100%{
		transform: translate(-50%);
	}
}
.monster .eye .eyeBall{
	animation: eyeMove 2s infinite alternate;
}
/*loading加载页面*/
.loadingPage{
	width: 100%;
	height: 100%;
	background-color: #0C4475;
	/*设置absolute覆盖页面loaded页面，且脱离文档流不会把页面撑开，用fix也行，但不能用relative。*/
	position: absolute;
	top: 0;
	left: 0;
	/*居中怪物*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*使进度条在其下面*/
	flex-direction: column;
}
.loadingBar{
	width: 200px;
	height: 10px;
	margin-top: 50px;
	border-radius: 10px;
	background-color: #fff;
	/*溢出部分隐藏*/
	overflow: hidden;
}
.loadingBar .black
{
	height: 10px;
	width: 0%;
	background-color: #e55A54;
}
/*使页面加载完后的所有属性变化都有1秒的过度。*/
.loadingPage{
	transition: all 1s;
}
.loadingPage .monster{
	transition: all 1s;
}

JS代码

var blackWidth = 0;
// 设置定时器让进度条滚动，当进度条达到慢状态是让它的透明度，变为0，这样就能显示第二个页面了，注意在loading页面设置过度的属性
timber = setInterval(function(){
	blackWidth++;
	$('.black').css('width',blackWidth + '%');
	if(blackWidth > 100){
		// 设置透明度为0，让loaded的页面显示
		$('.loadingPage').css('opacity','0');
		// 让monster旋转360度后变小消失
		$('.loadingPage .monster').css('transform','scale(0.1) rotateZ(360deg)');
	}
	if(blackWidth > 200){
		// 显示文本
		$('.loadedPage .context h1').html('<h2>We are monster</h2>');
		clearInterval(timber);
		// 最后将计时器清除
	}
},40)

简洁版（不带解释）

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
	/jquery-1.4.min.js"></script>
	<link rel="stylesheet" href="demo.css">
	
</head>
<body>	
	<div class="wrapper">
		<div>
			<h2 class="monsterText">Hello 
				<br>There</h2>
			<h3>We will eat you!</h3>
		</div>
		<div class="monster">
			<div class="eye">
				<div class="eyeBall">
				</div>
			</div>
			<div class="mouth"></div>
		</div>
		<div class="monster blue">
			<div class="eye">
				<div class="eyeBall">
				</div>
			</div>
			<div class="mouth"></div>
		</div>
		<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>
	</div>
	<script src="demo.js"></script>
</body>
</html>

CSS代码

*{
	margin: 0;
	padding: 0;
}
.wrapper,html,body{
	width: 100%;
	height: 100%;
	background-color: #DB4D6D;
	display: flex;
	justify-content: center;
	align-items: center;
}
.monster{
	width: 110px;
	height: 100px;
	border-radius: 20px;
	background-color: #e55A54;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	position: relative;
	animation: jumping 0.8s infinite alternate;
}
.monster .eye{
	width: 40%;
	height: 40%;
	border-radius: 50%;
	background-color: #fff;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.monster .mouth{
	width:32%;
	height: 12px;
	border-radius: 12px;
	background-color: #fff;
}
.monster .eye .eyeBall{
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: #0C4475;
	animation: eyemove 1.6s infinite alternate;
}
.monster::before,
.monster::after{
	content: '';
	display: block;
	width: 20%;
	height: 10px;
	border-radius: 10px;
	background-color: #fff;
	position: absolute;
	top: -10px;
	left: 50%;
}
.monster::before{
	transform: translateX(-70%) rotate(45deg);
}
.monster::after{
	transform: translateX(-30%) rotate(-45deg);
}
.monster.blue{
	background-color: #0C4475;
	animation: jumping 0.8s infinite alternate;
	animation-delay: 0.5s;
}
.monster.blue .eyeBall,
.monster.blue .mouth{
	background-color: #DB4D6D;
}

@keyframes jumping{
	0%{
		top: 0;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

	}
	100%{
		top: -50px;
		box-shadow: 0 100px 20px rgba(0, 0, 0, 0.2);
	}
}

@keyframes eyemove{
	0%,10%{
		transform: translate(50%);
	}
	90%,100%{
		transform: translate(-50%);
	}
}
.pageLoading{
	background-color: #0C4475;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

}
.pageLoading .loading{
	width: 200px;
	height: 8px;
	background-color: #fff;
	border-radius: 5px;
	margin: 50px;
	overflow: hidden;
}
.pageLoading .loading .bar{
	width: 0%;
	height: 100%;
	background-color: #DB4D6D;
}
.pageLoading.complete{
	opacity: 0;
	transition:all 1s;
}
.pageLoading.complete .monster{
	transition: 0.5s;
	transform: scale(0.1) rotateZ(360deg);
}

JS代码

var per = 0;
var timer;
timer = setInterval(function(){
	$('.bar').css('width',per + '%');
	per += 1;
	if(per > 100){
		$('.pageLoading').addClass('complete');
		clearInterval(timer);
		setTimeout(function(){
			$('.monsterText').html('<h2>We are monster</h2>')
		},3000)
	}
},30)

YF-SOD

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
每月两个小小项目——CSS3实现可爱动画加载页面

目录项目实现图片GIF项目思想详细版（带大量解释）HTML代码CSS代码JS代码简洁版（不带解释）HTML代码CSS代码JS代码项目实现图片GIF项目思想首先我们2个页面是通过设置absolute或fixed让一个页面，脱离文档流，并覆盖到另一个页面上面，这样就不会有滚动条。也就是说我们的loading页面要设置absolute或fixed先显示覆盖，所以我们为了方便编写应该先编写第二个页面，再编写第一个页面就是loading页面，进度条我们可以.
复制链接

扫一扫