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

代码语言:html

所属分类:布局界面

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

代码标签: css 录音 UI 布局

下面为部分代码预览,完整代码请点击下载或在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;
         .........完整代码请登录后点击上方下载按钮下载查看

网友评论0