[分享]css中怎么加入声音

CSS是前端开发中非常重要的一种技术，可以通过它来实现网页的美化和动态效果。现在，我们可以在CSS中加入声音，让网页更加生动。 .sound { backgroundcolor: 000; paddi...

CSS是前端开发中非常重要的一种技术，可以通过它来实现网页的美化和动态效果。现在，我们可以在CSS中加入声音，让网页更加生动。

 .sound {
        background-color: #000;
        padding: 20px;
        color: #fff;
        font-size: 18px;
        width: 200px;
        text-align: center;
        cursor: pointer;
    }

    .sound:hover {
        background-color: #555;
    }

    .sound:active {
        background-color: #999;
    }

    @keyframes sound {
        50% {
            transform: scale(1.2);
        }
    }

    .sound.play {
        animation: sound 0.3s linear;
    }

    .sound.pause {
        transform: scale(1);
    } 

以上是一个简单的CSS代码，其中包括了一个声音按钮的样式以及播放、暂停的动画效果。我们通过添加一些JavaScript代码来控制它的播放与暂停。

 var audio = new Audio('music.mp3');
    var soundButton = document.querySelector('.sound');

    soundButton.addEventListener('click', function() {
        if (audio.paused) {
            audio.play();
            soundButton.classList.add('play');
        } else {
            audio.pause();
            soundButton.classList.remove('play');
            soundButton.classList.add('pause');
            setTimeout(function() {
                soundButton.classList.remove('pause');
            }, 300);
        }
    }); 

在JavaScript代码中，我们创建了一个Audio对象，用来加载音频文件并控制它的播放和暂停。然后，我们监听了声音按钮的点击事件，在点击时根据音频的状态进行不同的操作。如果音频是暂停的，则调用play()方法播放，并给声音按钮添加一个play类以实现播放动画。如果音频正在播放，则调用pause()方法暂停，并依次添加pause和play类以实现暂停动画。最后，我们通过setTimeout()函数来实现暂停动画结束后移除pause类的效果。

通过以上CSS和JavaScript代码，我们可以很方便地在网页中添加声音，并且实现播放、暂停动画效果。让我们一起来尝试一下吧！