用css代码写一个音乐盒
时间: 2024-05-13 20:21:16 浏览: 10
好的,以下是一个简单的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` 属性替换为你自己的音频来源。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)