html动画实现歌曲封面碰到图片显示歌词

HTML 和 CSS 可以结合 JavaScript 来创建动态的网页效果，比如将歌曲封面与歌词联动。一种常见的做法是使用CSS 动画配合JavaScript库（如 jQuery 或 Vanilla JS），当鼠标悬停在歌曲封面图片上时，隐藏的歌词会逐渐显现出来，形成视觉上的动画效果。

以下是简单的步骤：

1. **HTML结构**：

<div class="song-cards">
  <img src="cover.jpg" alt="歌曲封面" class="cover-image">
  <div class="lyrics-container hidden">
    <p>歌曲歌词</p>
  </div>
</div>

2. **CSS样式**：

.cover-image {
  position: relative;
  transition: opacity 0.5s ease-in-out;
}

.lyrics-container {
  position: absolute;
  top: -100px; /* 初始位置 */
  display: none;
  background-color: rgba(0,0,0,0.8); /* 遮罩层颜色 */
  padding: 10px;
  z-index: 1;
}
.hidden {
  display: flex; /* 用于歌词逐渐显现 */
}

3. **JavaScript/jQuery代码**：

$(document).ready(function() {
  $('.cover-image').hover(
    function() { // 鼠标进入图片区域
      $('.lyrics-container').stop().fadeIn(); // 显示歌词
    },
    function() { // 鼠标离开图片区域
      $('.lyrics-container').fadeOut(); // 隐藏歌词
    }
  );
});

4. **可选：CSS3动画** 使用`@keyframes`可以制作更复杂的动画效果，比如歌词淡入淡出、滚动等。