js+css实现一个录音交互UI效果代码-html代码-BFW代码库

js+css实现一个录音交互UI效果代码

代码语言：html

代码描述：js+css实现一个录音交互UI效果代码，可以增加一些录音js实现真正的录音。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        *
        {
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }
        
        *:focus
        {
            outline: none;
        }
        
        html, body
        {
            height: 100%;
            min-height: 100%;
        }
        
        body
        {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #222;
        }
        
        #app-cover
        {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow-y: auto;
        }
        
        #app-box
        {
            position: absolute;
            top: 50%;
            right: 0;
            left: 0;
            width: 155px;
            margin: -70px auto 0 auto;
        }
        
        #toggle-button
        {
            width: 50px;
            height: 100px;
            background-color: #fff;
            border-radius: 100px;
            cursor: pointer;
        }
        
        #toggle-button:before
        {
            content: '';
            position: absolute;
            top: 56px;
            bottom: 6px;
            left: 6px;
            width: 38px;
            opacity: 1;
            background-color: #bcbcbc;
            border-radius: 100px; 
            transition: 0.3s linear all;
        }
        
        #toggle-button.moveup:before
        {
            top:56px;
            bottom: 6px;
            background-color: #ff4f4f;
            -webkit-animation: moveup-1 0.3s linear forwards, moveup-2 0.3s linear 0.6s forwards, blink 1s ease-in-out 0.9s infinite;
                    animation: moveup-1 0.3s linear forwards, moveup-2 0.3s linear 0.6s forwards, blink 1s ease-in-out 0.9s infinite;
        }
        
        #toggle-button.movedown:before
        {
            top: 6px;
            bottom: 56px; 
            background-color: #bcbcbc;
            -webkit-animation: movedown-1 0.3s linear 0s forwards,movedown-2 0.3s linear 0.6s forwards;
                    animation: movedown-1 0.3s linear 0s forwards,movedown-2 0.3s linear 0.6s forwards;
        }
        
        @-webkit-keyframes moveup-1
        {
            0%{ top: 56px; }
            100%{ top: 6px; }
        }
        
        @keyframes moveup-1
        {
            0%{ top: 56px; }
            100%{ top: 6px; }
        }
        
        @-webkit-keyframes moveup-2
        {
            0%{ bottom: 6px; }
            100%{ bottom: 56px; }
        }
        
        @keyframes moveup-2
        {
            0%{ bottom: 6px; }
            100%{ bottom: 56px; }
        }
        
        @-webkit-keyframes movedown-1
        {
            0%{ bottom:56px; }
            100%{ bottom:6px; }
        }
        
        @keyframes movedown-1
        {
            0%{ bottom:56px; }
            100%{ bottom:6px; }
        }
        
        @-webkit-keyframes movedown-2
        {
            0%{ top:6px; }
            100%{ top:56px; }
        }
        
        @keyframes movedown-2
        {
            0%{ top:6px; }
            100%{ top:56px; }
        }
        
        @-webkit-keyframes blink
        {
            0%{ opacity: 1; }
            75%{ opacity: 0; }
            100%{ opacity: 1; }
        }
        
        @keyframes blink
        {
            0%{ opacity: 1; }
            75%{ opacity: 0; }
            100%{ opacity: 1; }
        }
        
        #recorder-data
        {
            position: absolute;
            top: 50%;
            right: 0;
            width: 93px;
            margin-top: -42px;
        }
        
        .rec-text
        {
            color: #656565;
            font-size: 30px;
            line-height: 1;
            transition: 0.3s ease color;
            cursor: pointer;
        }
        
        .rec-text.active
        {
            color: #fff;
        }
        
        #active-text
        {
            margin-bottom: 16px;
        }
        
        #active-text.lspace
        {
            letter-spacing: 2px;
        }
        
        #hint
        {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            color: #fff;
            text-align: center;
            padding: 10px;
            background-color: #272727;
        }
    </sty.........完整代码请登录后点击上方下载按钮下载查看