粒子生长动画 - 智慧树 HTML 代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>智慧树</title>
	<style>
		#tree {
			width: 800px;
			height: 600px;
			background-color: #f2f2f2;
			position: relative;
			margin: 0 auto;
			overflow: hidden;
		}
		#particle {
			width: 10px;
			height: 10px;
			background-color: #0099ff;
			border-radius: 50%;
			position: absolute;
			top: 300px;
			left: 400px;
			animation: particle-growth 5s linear forwards;
		}
		@keyframes particle-growth {
			0% {
				transform: scale(0);
			}
			100% {
				top: 0;
				left: 0;
				transform: scale(100);
				background-color: #00cc33;
			}
		}
	</style>
</head>
<body>
	<div id='tree'>
		<div id='particle'></div>
	</div>
</body>
</html>