自制css3进度条小动画

最新推荐文章于 2025-03-17 12:53:03 发布

原创最新推荐文章于 2025-03-17 12:53:03 发布 · 451 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

17 篇文章

订阅专栏

jquery

5 篇文章

订阅专栏

本文介绍了一种使用CSS3实现的进度条加载动画效果。通过缩放变换和关键帧动画，实现了流畅且有趣的加载视觉体验。文章提供了完整的HTML和CSS代码，并通过JavaScript控制动画消失，确保了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3进度条小动画</title>
<style>
	.loading{
			width:100%;
			height:100%;
			position:fixed;
			left:0;
			top:0;
			z-index:100;
			background:#FFF;
		}
	.loading .pic{
		width:50px;
		height:50px;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
	}
	.loading .pic i{
		display:block;
		width:6px;
		height:50px;
		background:#06C;
		float:left;
		margin:0 2px;
		-webkit-transform:scaleY(0.4);
		    -ms-transform:scaleY(0.4);
		        transform:scaleY(0.4);
		-webkit-animation:load 1.2s infinite;
		        animation:load 1.2s infinite;
	};
	.loading .pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
	.loading .pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
	.loading .pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
	.loading .pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
	@-webkit-keyframes load{
		0%,40%,100%{
			-webkit-transform:scaleY(0.4);
			        transform:scaleY(0.4);
		}
		20%{
			-webkit-transform:scaleY(1);
			        transform:scaleY(1);
		}
	}
	@keyframes load{
		0%,40%,100%{
			-webkit-transform:scaleY(0.4);
			        transform:scaleY(0.4);
		}
		20%{
			-webkit-transform:scaleY(1);
			        transform:scaleY(1);
		}
	}
</style>
<script src="http://localhost/jquery-3.2.1.min.js"></script>
<script>
	document.onreadystatechange=function(){
		if(document.readyState=="complete"){
			$(".loading").fadeOut();
		}
	}
</script>
</head>

<body>
	<div class="loading">
    	<div class="pic">
        	<i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
	<img src="http://p0.so.qhimgs1.com/t011fdff1cc0c3b5ddc.jpg"/>
    <img src="http://p1.so.qhimgs1.com/t01a7de1625f9c79011.jpg"/>
    <img src="http://p2.so.qhmsg.com/t0152d7e8bb9f3f79c7.jpg"/>
    <img src="http://p3.so.qhmsg.com/t017007538171c7e6a8.jpg"/>
    <img src="http://p2.so.qhimgs1.com/t01279fce5fe1f2724e.jpg"/>
    <img src="http://p1.so.qhimgs1.com/t01d184559fd4583b51.jpg"/>
</body>
</html>

写完css3代码之后可以让代码兼容浏览器的工具网址：

http://autoprefixer.github.io/