用css3动画实现loading效果

最新推荐文章于 2024-05-31 11:47:41 发布

养只狗

最新推荐文章于 2024-05-31 11:47:41 发布

阅读量130

点赞数 1

CC 4.0 BY-SA版权

文章标签： web前端初学前端入门 loading效果 css3动画

本文链接：https://blog.youkuaiyun.com/weixin_45006204/article/details/96426389

本文介绍了一个使用纯CSS实现的加载动画效果，通过不同位置的小球动态缩放展示动画过程。文章详细展示了如何设置动画属性、定位及旋转元素来达到所需视觉效果。

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

源代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; padding: 0;
			}
			body {
				margin: 200px;
				position: relative;
			}
			.A {
				width: 50px; height: 50px;
				position: absolute;
			}
			.A p {
				width: 12px; height: 12px;
				background: gray;
				border-radius: 50%;
				position: absolute;
				animation: loading 2s infinite linear;
			}
			.A p:nth-child(1) {
				left: 0; top: 0;
				animation-delay: -0.1s;
			}
			.A p:nth-child(2) {
				right: 0; top: 0;
				animation-delay: -0.5s;
			}
			.A p:nth-child(3) {
				right: 0; bottom: 0;
				animation-delay: -0.9s;
			}
			.A p:nth-child(4) {
				left: 0; bottom: 0;
				animation-delay: -1.3s;
			}
			.B {
				width: 50px; height: 50px;
				position: absolute;
				transform: rotate(45deg);
			}
			.B p {
				width: 12px; height: 12px;
				background: gray;
				border-radius: 50%;
				position: absolute;
				animation: loading 2s infinite linear;
			}
			.B p:nth-child(1) {
				left: 0; top: 0;
				animation-delay: -0.3s;
			}
			.B p:nth-child(2) {
				right: 0; top: 0;
				animation-delay: -0.7s;
			}
			.B p:nth-child(3) {
				right: 0; bottom: 0;
				animation-delay: -1.1s;
			}
			.B p:nth-child(4) {
				left: 0; bottom: 0;
				animation-delay: -1.5s;
			}
			@-webkit-keyframes loading{
				0%{transform: scale(0);}
				50%{transform: scale(1);}
				100%{transform: scale(0);}
			}
		</style>
	</head>
	<body>
		<div class="A">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
		<div class="B">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>