[分享]css3打开图片放出音乐

CSS3是一项非常有用的技术，它可以让我们在网页中使用很多很酷的效果，比如打开图片放出音乐就是其中之一。/ 设置图片为背景 / .musicbox { backgroundimage: url(mus...

CSS3是一项非常有用的技术，它可以让我们在网页中使用很多很酷的效果，比如打开图片放出音乐就是其中之一。

/* 设置图片为背景 */
.music-box {
  background-image: url('music.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}

/* 设置播放图标 */
.music-play {
  background-image: url('play.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* 音乐播放 */
.music-box.play .music-play {
  display: none;
}

.music-box.play::after {
  content: '';
  width: 60%;
  height: 60%;
  background-image: url('note.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: note 1s infinite;
}

/* 音符上下浮动效果 */
@keyframes note {
  0% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -45%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
} 

如上代码所示，首先我们需要将背景图片设置为图片的地址，并将图片的大小设置为300px * 300px。然后需要添加一个播放图标，当用户点击该图标时，会触发音乐的播放。设置播放图标的初始样式，设置在屏幕中央，通过设置top和transform属性，将其在垂直居中。

当用户点击播放图标后，需要将图片设置为播放状态，通过添加类名play，然后隐藏播放图标，显示音符，并通过设置animation属性，实现音符上下浮动效果。

总之，通过使用CSS3技术，我们可以在网页上实现很多很酷的效果，这项技术是前端开发人员必备的技能之一。