实现一个简单动画

最新推荐文章于 2023-06-25 20:51:27 发布

baidu-liuming

最新推荐文章于 2023-06-25 20:51:27 发布

阅读量371

点赞数

分类专栏： H5 文章标签：动画

本文链接：https://blog.csdn.net/fisherming/article/details/74626877

版权

H5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现一个简易loading动画

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>loading动画实现</title>
	</head>
	<style type="text/css">
		body {
			/*居中*/
			text-align: center;
		}
		
		.container {
			/*块级元素在同一行*/
			display: inline-block;
		}
		
		.point {
			width: 10px;
			height: 10px;
			background: #000000;
			/*设置半径*/
			border-radius: 50%;
			/*让标签产生浮动的效果，块元素都是从上到下排列的，left属性，实现左右浮动 */
			float: left;
			/*每个元素的距离左部位置5px*/
			margin-left: 5px;
			/*一次动画持续1.2秒，先加速后减速，不停执行*/
			animation: myAnima 1.2s ease-in-out infinite;
		}
		
		.two {
			animation-delay: 200ms;
		}
		
		.three {
			animation-delay: 400ms;
		}
		
		@keyframes myAnima {
			from {
				/*设置透明度  */
				opacity: 0.8
			}
			to {
				opacity: 0
			}
		}
	</style>

	<body>
		<div class="container">
			<div class="point one"></div>
			<div class="point two"></div>
			<div class="point three"></div>
		</div>
	</body>

</html>