0; border: none; position: relative;overflow: hidden;white-space: nowrap;vertical-align: middle; cursor: pointer; outline: none;}.btnPlayAmr:before { content: ' '; display: block; position: absolute; left:0; top:0; right:0; bottom:0; background-image: url('play.png'); background-size:2800%; transition: background-position0.5s;}.btnPlayAmr.playing:before { animation: play2s steps(28) infinite;}@keyframes play { to { background-position: -2800px;}}html代码: javascript代码: var btnPlay = document.getElementsByClassName('btnPlayAmr')[0];btnPlay.addEventListener('click', function() { if (btnPlay.classList.contains('playing')) { btnPlay.classList.remove('playing'); clearInterval(window.playingInterval); window.playingInterval = null; } else { btnPlay.classList.add('playing'); var i =0; window.playingInterval = setInterval(function() { i = (i +1) %28; btnPlay.style.backgroundPosition = (-i *100) + '%0'; },50); }});
以上是一个简单的实现微信语音播放动画效果的示例代码。该示例通过使用HTML、CSS和Javascript来模拟微信语音播放时按钮的动画效果。下面将对代码进行详细解释。
首先是素材准备部分。在这个示例中，我们需要一个播放按钮的图片文件，这里假设图片文件名为play.png。该图片应该是包含所有播放动画帧的一张长条形图片，并且每帧的大小应该是一样的。这样我们就可以通过改变背景图片的位置来实现动画效果。
接下来是CSS代码的部分。我们定义了一个名为btnPlayAmr的类，用于表示播放按钮。该类的一些基本样式设置包括按钮的宽高、背景大小、字体大小、背景颜色等。同时，我们使用了:before伪类来为按钮添加一个伪元素，并对该伪元素设置了绝对定位和背景图片。在伪元素的背景图片中包含了所有的动画帧。另外，我们还定义了.playing状态下的按钮的伪元素的动画效果，通过改变背景图片的位置来实现动画效果。
接着是HTML代码的部分。我们在HTML代码中创建了一个button元素，并为其添加了btnPlayAmr类。这样就可以将上面定义的样式应用到按钮上。
最后是Javascript代码的部分。在Javascript代码中，我们首先使用document.getElementsByClassName获取到了添加了btnPlayAmr类的按钮元素，并将其赋值给了btnPlay变量。然后我们通过addEventListener为按钮添加了一个点击事件的监听器。
在点击事件的监听器中，我们通过判断按钮是否处于playing状态来区分播放和停止动画。当按钮处于playing状态时，我们使用setInterval函数来定时刷新按钮的背景图片位置，从而实现动画效果。同时我们还记录下了setInterval返回的定时器ID，以便后续可以清除定时器。相反，当按钮处于非playing状态时，我们清除了之前记录的定时器ID，并且移除了按钮上的playing类。
通过以上的步骤，我们就实现了模拟微信语音播放动画效果的功能。当用户点击按钮时，按钮的背景图片会产生动画效果，从而提供了视觉上的提示。这种方式可以增加用户体验，使得页面更加生动。同时，这种方式也可以应用在其他需要类似动画效果的场景中，具有一定的通用性。
