等待动画

最新推荐文章于 2025-08-23 20:28:56 发布

weixin_33682790

最新推荐文章于 2025-08-23 20:28:56 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/2449363/blog/1582328

本文介绍了一种使用HTML和CSS实现的等待动画效果。通过定义不同位置的圆形元素，并结合关键帧动画，实现了动态缩放的等待加载图标。文章提供了完整的代码示例。

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

2019独角兽企业重金招聘Python工程师标准>>>

效果如下：

废话不多说，见下面代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>等待动画</title>

		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				border: 0;
				margin: 0;
				padding: 0;
			}
			
			.flex-center {
				display: -webkit-box;
				display: -moz-box;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-align-items: center;
				-moz-align-items: center;
				align-items: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
			
			.wait-wapper {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
			}
			
			.wait-wapper .wait-contain {
				width: 100px;
				height: 100px;
				position: relative;
			}
			
			.wait-wapper .percent-num {
    			/*font-size: 16px;*/
    			font-size: 12px;
			}
			
			.wait-wapper .wait-box {
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box:nth-of-type(2) {
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
			}
			
			.wait-wapper .wait-box .circle {
				position: absolute;
				width: 25px;
				height: 25px;
				background: radial-gradient(circle at center, #75b4e6, rgba(117, 180, 230, 0.55), rgba(117, 180, 230, 0.10),#fff);
				border-radius: 12px;
				-webkit-animation: circle_animation 1.2s ease-in-out infinite;
				animation: circle_animation 1.2s ease-in-out infinite;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(1) {
				left: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(2) {
				right: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(3) {
				right: 0;
				bottom: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(4) {
				left: 0;
				bottom: 0;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(1) {
				-webkit-animation-delay: -1.05s;
				animation-delay: -1.05s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(1) {
				-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(2) {
				-webkit-animation-delay: -0.75s;
				animation-delay: -0.75s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(2) {
				-webkit-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(3) {
				-webkit-animation-delay: -0.45s;
				animation-delay: -0.45s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(3) {
				-webkit-animation-delay: -0.30s;
				animation-delay: -0.30s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(4) {
				-webkit-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(4) {
				-webkit-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			
			@keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-moz-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-webkit-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-o-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
		</style>

	</head>

	<body>

		<div class="wait-wapper flex-center">
			<div class="wait-contain flex-center">
				<span class="percent-num">
					倒计时/进度
				</span>
				<div class="wait-box wait-box-1">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="wait-box wait-box-2">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
			</div>
		</div>
		
	</body>

</html>

转载于:https://my.oschina.net/u/2449363/blog/1582328