CSS3 加载样式

最新推荐文章于 2025-11-26 03:04:08 发布

原创最新推荐文章于 2025-11-26 03:04:08 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #加载样式 #animation #keyframes #winner winner chicken dinner

The Art of Finger 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS的animation属性结合@keyframes实现加载中的动画效果。通过不同元素间的动画配合，创造出平滑且吸引人的视觉体验。

animation属性 + @keyframes 实现简易的【加载中】样式

load_test.html

<html>
<head>
	<link rel="stylesheet" type="text/css" href="load_style.css">

</head>
<body>
	<!-- 1 ~ 3  -->	
	<div>
		<input id='process_state_1' class='transform'></input>
		<input id='process_state_2' class='transform'></input>
		<input id='process_state_3' class='transform'></input>
	</div>
	
	<div class='block'> </div>
	
	<!-- 4.   -->
	<div>
		<input id='process_0' class='transform'></input>
		<input id='process_1' class='transform'></input>
		<input id='process_2' class='transform'></input>
		<input id='process_3' class='transform'></input>
		<input id='process_4' class='transform'></input>
		<input id='process_5' class='transform'></input>
		<input id='process_6' class='transform'></input>
		<input id='process_7' class='transform'></input>
		<input id='process_8' class='transform'></input>
		<input id='process_9' class='transform'></input>
	</div>
</body>
</html>

load_style.css

/**
	loading 样式制作
*/

* {
	padding: 0px;
	margin: 0px;
}

body {
	margin-top: 100px;
	background: rgba(221, 221, 221, 1);
	text-align: center;
}

.block {
	height: 50px;
}

/** 模板网址： http://www.runoob.com/try/try.php?filename=trycss3_animation3 */

/** 1. 根据例子的尝试 */
/*
.transform {
	position: relative;
	text-align: center;
	width: 100px;
	height: 100px;
	background: red;
	font-size: 20px;
	font-weight: bolder;
	color: white;
	border-radius: 20px;
	border-width: 0px;
	animation: inprocess 2s;
	animation-iteration-count: infinite; 
}

@keyframes inprocess {
	0% {background: red; left: 0px; top: 0px;}
	25% {background: yellow; left: 200px; top: 0px;}
	50% {background: blue; left: 200px; top: 200px;}
	75% {background: green; left: 0px; top: 200px;}
	100% {background: red; left: 0px; top: 0px;}
}
*/

/** 2. 稍加改变 */
/*
.transform {
	position: relative;
	text-align: center;
	width: 100px;
	height: 100px;
	background: red;
	font-size: 20px;
	font-weight: bolder;
	color: white;
	border-radius: 20px;
	border-width: 0px;
	animation: inprocess 2s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_test {
	0% {background: red; left: 0px; top: 0px;}
	50% {background: blue; left: 200px; top: 0px;}
	100% {background: red; left: 0px; top: 0px;}
}
*/

/** 3. 力学传递 */

.transform {
	position: relative;
	text-align: center;
	width: 40px;
	height: 40px;
	background: white;
	font-size: 14px;
	font-weight: bolder;
	color: #83ccae;
	border-radius: 20px;
	border-width: 0px;
}

#process_state_1 {
	animation: inprocess_left 3s;
	animation-iteration-count: infinite;
}

#process_state_2 {
	animation: inprocess_middle 3s;
	animation-iteration-count: infinite;
}

#process_state_3 {
	animation: inprocess_right 3s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_left {
	0% {background: #83ccae; left: -200px;}
	25% {background: white; left: 0px;}
	50% {background: white; left: 0px;}
	75% {background: white; left: 0px;}
	100% {background: #83ccae; left: -200px;}
}

@keyframes inprocess_middle {
	0% {background: white; left: 0px;}
	25% {background: #83ccae; left: 0px;}
	50% {background: white; left: 0px;}
	75% {background: #83ccae; left: 0px;}
	100% {background: white; left: 0px;}
}

@keyframes inprocess_right {
	0% {background: white; left: 0px;}
	25% {background: white; left: 0px;}
	50% {background: #83ccae; left: 200px;}
	75% {background: white; left: 0px;}
	100% {background: white; left: 0px;}
}

#process_0 {
	animation: inprocess_0 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_0 {
	0% {background: #83ccae;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_1 {
	animation: inprocess_1 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_1 {
	0% {background: white;}
	5% {background: white;}
	10% {background: #83ccae;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_2 {
	animation: inprocess_2 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_2 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: #83ccae;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_3 {
	animation: inprocess_3 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_3 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: #83ccae;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_4 {
	animation: inprocess_4 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_4 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: #83ccae;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_5 {
	animation: inprocess_5 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_5 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: #83ccae;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_6 {
	animation: inprocess_6 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_6 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: #83ccae;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_7 {
	animation: inprocess_7 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_7 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: #83ccae;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_8 {
	animation: inprocess_8 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_8 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: #83ccae;}	
	95% {background: white;}	
	100% {background: white;}
}

#process_9 {
	animation: inprocess_9 0.8s;
	animation-iteration-count: infinite;
}

@keyframes inprocess_9 {
	0% {background: white;}
	5% {background: white;}
	10% {background: white;}
	15% {background: white;}
	20% {background: white;}
	25% {background: white;}
	30% {background: white;}
	35% {background: white;}
	40% {background: white;}
	45% {background: white;}
	50% {background: white;}
	55% {background: white;}
	60% {background: white;}
	65% {background: white;}
	70% {background: white;}
	75% {background: white;}
	80% {background: white;}	
	85% {background: white;}	
	90% {background: white;}	
	95% {background: white;}	
	100% {background: #83ccae;}
}

各自保存文件，Just Run!