配有音乐 css

配有音乐 CSS 是一种可以为你的网页添加音乐的 CSS 样式。使用这种样式，你可以为你的网页设置背景音乐，从而增强网页的氛围。为了使用这种样式，你需要先引入一个带有音乐的 HTML5 元素，然后使用 CSS 来控制音乐的播放。下面就是一个使用配有音乐 CSS 的示例：

audio src="music.mp3" autoplay loop>
    /audio>
    style>
body {
    background-color: #333;
}
audio {
    display: none;
}
::after {
    content: url(music.png);
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}
::after:hover {
    content: url(music.gif);
}
::after:active {
    content: url(music.gif);
}
::after:not(:hover) {
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
100% {
    transform: rotate(360deg);
}
}
::after {
    animation: opacity 2s linear infinite;
}
@keyframes opacity {
0% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
100% {
    opacity: 1;
}
}
::before {
    content: "Music On";
    cursor: pointer;
    position: absolute;
    top: 60px;
    right: -30px;
    width: 100px;
    font-size: 20px;
    text-align: center;
    transform: rotate(-90deg);
}
audio:not([autoplay]) + ::before {
    content: "Music Off";
}
    

上述代码实现了一个旋转的音乐图标，鼠标悬停时会切换到一个动态的音乐图标，点击后开始播放音乐，再次点击则停止播放音乐。如果想要自行替换图标，只需要将 img 标签中的 music.png 和 music.gif 替换成你需要的图片路径即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！