用css代码写一个音乐盒
时间: 2024-05-13 13:21:16 浏览: 8
好的,以下是一个简单的CSS代码可以实现音乐盒效果:
HTML代码:
```
<button class="music-box">
<audio src="music.mp3"></audio>
</button>
```
CSS代码:
```
.music-box {
display: inline-block;
width: 60px;
height: 60px;
border: none;
background-color: #f66;
border-radius: 50%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
cursor: pointer;
}
.music-box:before, .music-box:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 38px;
width: 4px;
background-color: #fff;
border-radius: 2px;
}
.music-box:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.music-box:after {
transform: translate(-50%, -50%) rotate(45deg);
}
.music-box:hover:before, .music-box:hover:after {
background-color: #000;
}
.music-box:hover {
background-color: #000;
}
.music-box:hover audio {
transform: scale(1.2);
}
.music-box audio {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: scale(0);
transition: transform 0.2s ease-in-out;
}
```
请注意,在这个实现中,我使用了一个 `button` 元素作为音乐盒的外观,但这只是为了示例目的,实际上你可以使用任何元素作为容器。另外,我设置了 `audio` 元素作为音频的来源,你需要将 `src` 属性替换为你自己的音频来源。