CSS是前端开发中非常重要的一种技术,可以通过它来实现网页的美化和动态效果。现在,我们可以在CSS中加入声音,让网页更加生动。 .sound { background-color: #000; pad
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代码,我们可以很方便地在网页中添加声音,并且实现播放、暂停动画效果。让我们一起来尝试一下吧!
粉丝
0
关注
0
收藏
0