如何用CSS制作一个炫酷的音阶动画特效？

33 min read

以下是一个简单的CSS动画特效，实现黑白键上下滑动的音阶效果：

<!DOCTYPE html>
<html>
<head>
	<title>音阶动画特效</title>
	<style type="text/css">
		.key {
			width: 50px;
			height: 120px;
			margin: 10px;
			position: relative;
			background-color: white;
			border: 1px solid black;
			float: left;
			animation: piano 0.5s ease-out infinite alternate;
		}

		.black {
			width: 30px;
			height: 80px;
			position: absolute;
			top: 0;
			left: -13px;
			background-color: black;
			z-index: 1;
			animation: piano 0.5s ease-out infinite alternate-reverse;
		}

		@keyframes piano {
			from {
				transform: translateY(0px);
			}
			to {
				transform: translateY(10px);
			}
		}
	</style>
</head>
<body>

<div class="key"></div>
<div class="key black"></div>
<div class="key"></div>
<div class="key black"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key black"></div>
<div class="key"></div>
<div class="key black"></div>
<div class="key"></div>
<div class="key black"></div>
<div class="key"></div>

</body>
</html>

这段代码的实现思路是创建多个div元素表示黑白键，使用CSS的transform属性实现上下滑动效果，使用animation属性控制动画播放。其中白键直接用一个div元素表示，黑键使用绝对定位实现叠在白键上方。通过调整黑键的top和left属性可以让它们显示在正确的位置。

这只是一个比较简单的示例，可以根据实际需求添加更多的特效和交互。