<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microphone Recording Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.microphone-btn {
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
outline: none;
}
.microphone-icon {
width: 50px;
height: 50px;
background-color: #333;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
.microphone-icon::before {
content: '';
width: 20px;
height: 30px;
background-color: #fff;
border-radius: 10px 10px 0 0;
position: absolute;
top: 5px;
}
.microphone-icon::after {
content: '';
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
bottom: 5px;
}
.wave {
position: absolute;
border: 4px solid #f00; /* 设置线的粗细 */
border-radius: 50%;
opacity: 0;
animation: wave-animation 1.5s infinite;
}
.microphone-icon.recording .wave:nth-child(1) {
animation-delay: 0s;
}
.microphone-icon.recording .wave:nth-child(2) {
animation-delay: 0.5s;
}
.microphone-icon.recording .wave:nth-child(3) {
animation-delay: 1s;
}
@keyframes wave-animation {
0% {
width: 50px;
height: 50px;
opacity: 1;
border-color: rgba(255, 0, 0, 1);
}
100% {
width: 150px;
height: 150px;
opacity: 0;
border-color: rgba(255, 0, 0, 0);
}
}
</style>
</head>
<body>
<button id="startRecording" class="microphone-btn">
<div class="microphone-icon recording">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</button>
<script>
document.getElementById('startRecording').addEventListener('click', function() {
const microphoneIcon = document.querySelector('.microphone-icon');
microphoneIcon.classList.toggle('recording');
});
</script>
</body>
</html>