当前位置：首页 > news >正文

【CSS3】录音中。。。

news 2025/8/18 4:27:36

在这里插入图片描述
ai写的这个动画效果感觉是真不错，记录下来

<divv-if="recordText.includes('录音中')"class="recording-popup"flexflex-colitems-centerjustify-center><div class="recording-animation"><div class="recording-wave"></div><div class="recording-wave"></div><div class="recording-wave"></div></div><div mt-2 text-white>{{ recordText }}</div></div>

/* 录音悬浮小窗样式 */
.recording-popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.7);border-radius: 12px;padding: 15px;z-index: 1000;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);width: 120px;height: 120px;
}.recording-animation {position: relative;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;
}.recording-wave {position: absolute;width: 60px;height: 60px;border: 2px solid #ff4d4f;border-radius: 50%;animation: recording-wave-animation 1.5s infinite;
}.recording-wave:nth-child(2) {animation-delay: 0.5s;
}.recording-wave:nth-child(3) {animation-delay: 1s;
}@keyframes recording-wave-animation {0% {transform: scale(0.5);opacity: 1;}100% {transform: scale(1.5);opacity: 0;}
}