动态大树HTML代码示例 - 使用CSS动画制作摇摆树枝 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>动态大树</title>
	<style>
		body {
			background-color: #2F4F4F;
		}
		.tree {
			position: relative;
			width: 200px;
			height: 400px;
			margin: 0 auto;
		}
		.tree:before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-bottom: 100px solid #8B4513;
			transform: translateX(-50%);
		}
		.tree:after {
			content: '';
			position: absolute;
			top: 100px;
			left: 50%;
			width: 0;
			height: 0;
			border-left: 10px solid transparent;
			border-right: 10px solid transparent;
			border-top: 50px solid #8B4513;
			transform: translateX(-50%);
		}
		.tree .trunk {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 20px;
			height: 200px;
			background-color: #8B4513;
			transform: translateX(-50%);
		}
		.tree .branch1 {
			position: absolute;
			bottom: 100px;
			left: 50%;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #228B22;
			transform: translateX(-50%);
			animation: branch1 2s infinite alternate ease-in-out;
		}
		.tree .branch2 {
			position: absolute;
			bottom: 150px;
			left: 50%;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #228B22;
			transform: translateX(-50%);
			animation: branch2 2s infinite alternate ease-in-out;
		}
		.tree .branch3 {
			position: absolute;
			bottom: 180px;
			left: 50%;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: #228B22;
			transform: translateX(-50%);
			animation: branch3 2s infinite alternate ease-in-out;
		}
		@keyframes branch1 {
			0% {
				transform: translateX(-50%) rotate(0deg);
			}
			100% {
				transform: translateX(-50%) rotate(30deg);
			}
		}
		@keyframes branch2 {
			0% {
				transform: translateX(-50%) rotate(0deg);
			}
			100% {
				transform: translateX(-50%) rotate(-30deg);
			}
		}
		@keyframes branch3 {
			0% {
				transform: translateX(-50%) rotate(0deg);
			}
			100% {
				transform: translateX(-50%) rotate(20deg);
			}
		}
	</style>
</head>
<body>
	<div class='tree'>
		<div class='trunk'></div>
		<div class='branch1'></div>
		<div class='branch2'></div>
		<div class='branch3'></div>
	</div>
</body>
</html>