照片鋼琴是一種利用CSS效果來制作的音樂游戲，通過移動鼠標或按下鍵盤，可以演奏出美妙的音樂。下面我們來了解一下該效果的具體實現。

html {
/* 設置背景圖片 */
background: url('piano.jpg') center center no-repeat;
background-size: cover;
/* 防止拖動游戲界面 */
overflow: hidden;
}
/* 繪制鋼琴鍵盤 */
.piano {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 550px;
height: 160px;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 20px;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
}
/* 鋼琴鍵樣式 */
.key-white {
position: relative;
flex: 1;
height: 100%;
background: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px;
cursor: pointer;
}
/* 改變鼠標懸浮時的樣式 */
.key-white:hover {
background: #dcdcdc;
}
/* 十個白鍵 */
.key-white:nth-child(1),
.key-white:nth-child(2),
.key-white:nth-child(4),
.key-white:nth-child(5),
.key-white:nth-child(6),
.key-white:nth-child(8),
.key-white:nth-child(9),
.key-white:nth-child(11),
.key-white:nth-child(12) {
z-index: 2;
}
/* 兩個黑鍵 */
.key-black {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 65%;
background: #000;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* 鼠標懸浮時的樣式 */
.key-black:hover {
background: rgba(0, 0, 0, 0.8);
}
/* 五個黑鍵 */
.key-black:nth-child(odd) {
z-index: 3;
transform: translateX(-20px);
}
.key-black:nth-child(even) {
transform: translateX(20px);
}
/* 改變按下鍵盤時的樣式 */
.key-white.active,
.key-black.active {
background: #dcdcdc;
}
/* JS代碼 */
const keys = document.querySelectorAll('.key-white, .key-black');
keys.forEach(key =>{
key.addEventListener('click', () =>playSound(key));
});
document.addEventListener('keydown', e =>{
if (e.repeat) return;
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
playSound(key);
});
function playSound(key) {
if (!key) return;
const note = key.dataset.note;
key.classList.add('active');
const audio = document.querySelector(`audio[data-note="${note}"]`);
audio.currentTime = 0;
audio.play();
}

通過上述代碼，我們可以實現一個非常簡單的照片鋼琴，通過CSS效果讓鋼琴鍵看起來非常逼真。JavaScript代碼處理用戶的點擊和鍵盤事件，播放對應的音符。