html 仿siri音频动画
时间: 2023-07-01 13:20:00 浏览: 76
可以使用CSS3的动画效果来实现类似Siri音频动画的效果。
首先,需要在HTML中添加一个音频元素。
```html
<audio id="audio" src="audio.mp3"></audio>
```
然后,使用CSS样式来定义音频元素的大小和位置,并添加一个伪元素来实现动画效果。
```css
#audio {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background-color: #333;
}
#audio::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
transform: translateX(-50%);
animation: pulse 1s ease-out infinite;
}
@keyframes pulse {
0% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) scale(1.5);
opacity: 0;
}
}
```
这段代码会在音频元素下方添加一个白色的圆形伪元素,并且使用CSS动画来让它呈现脉冲效果。
最后,使用JavaScript来控制音频的播放和暂停,并且在播放时添加一个类来显示动画效果。
```javascript
var audio = document.getElementById("audio");
audio.addEventListener("play", function() {
audio.classList.add("playing");
});
audio.addEventListener("pause", function() {
audio.classList.remove("playing");
});
```
这样就可以实现一个类似Siri音频动画的效果了。