css布局模仿微信语音视频通话界面ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局模仿微信语音视频通话界面ui效果代码，共六个ui界面，语音通话发起、语音通话邀请、语音通话中、视频通话发起、视频通话邀请、视频通话中UI界面。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        body,html {
            height: 100%;
            width: 100%
        }

        .chat-page {
            background-color: #000;
            position: fixed;
            z-index: 10000;
            border-radius: 4px;
            overflow: hidden
        }

        .chat-page div,p {
            margin: 0;
            padding: 0;
            border: none
        }

        .chat-window {}.chat-page i {
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            cursor: pointer
        }

        .chat-page .chat-avatar {
            display: inline-block;
            width: 80px;
            height: 80px;
            border-radius: 50%
        }

        .chat-page .chat-loading-text {
            width: 12px;
            text-align: left;
            display: inline-block
        }

        .chat-page .chat-nickname {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 180px
        }

        .chat-launch-voice-page {
            position: fixed;
            left: calc(50% - 150px);
            top: calc(50% - 210px);
            text-align: center;
            height: 420px;
            width: 300px
        }

        .chat-launch-voice-page .chat-avatar {
            margin-top: 101px
        }

        .chat-launch-voice-page .chat-info {
            margin-top: 10px
        }

        .chat-launch-voice-page .chat-nickname {
            font-size: 24px;
            color: #FFF;
            text-align: center;
            line-height: 24px;
            width: 100%;
            margin: 0 auto
        }

        .chat-launch-voice-page .chat-notice {
            font-size: 12px;
            color: #FFF;
            text-align: center;
            line-height: 12px;
            margin-top: 10px
        }

        .chat-loading-span {
            background-color: #fff;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block
        }

        .chat-loading-span:nth-child(1) {
            opacity: .9
        }

        .chat-loading-span:nth-child(2) {
            opacity: .6
        }

        .chat-loading-span:nth-child(3) {
            opacity: .3
        }

        .chat-launch-voice-page .chat-info .chat-notice-bg {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            margin-top: 30px;
            opacity: .1;
            background: #FFF;
            border-radius: 6px;
            width: 242px
        }

        .chat-launch-voice-page .chat-info .chat-notice-2 {
            display: inline-block;
            height: 22px;
            line-height: 22px;
            border-radius: 6px;
            width: 242px;
            font-size: 12px;
            color: #fff;
            position: relative;
            top: -25.5px;
            z-index: 1
        }

        .chat-launch-voice-page .chat-info .chat-hide {
            display: none
        }

        .chat-launch-voice-page .chat-bottom-cancel {
            position: absolute;
            left: 50%;
            bottom: 18.5px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
        }

        .chat-launch-voice-page .chat-cancel {
            display: inline-block;
            height: 50px;
            width: 50px;
            background-size: contain;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e9ca2a7b.png);
            margin-top: -20px
        }

        .chat-launch-voice-page .chat-bottom-cancel p {
            margin-top: 10px;
            font-size: 12px;
            line-height: 12px;
            height: 12px;
            color: #fff
        }

        .chat-receive-voice-page {
            text-align: center;
            width: 300px;
            height: 300px;
            right: 0;
            bottom: 0
        }

        .chat-receive-voice-page .chat-user-info {
            position: relative;
            width: 100%
        }

        .chat-receive-voice-page .chat-avatar {
            position: absolute;
            width: 60px;
            height: 60px;
            left: 10px;
            top: 10px
        }

        .chat-receive-voice-page .chat-nickname {
            position: absolute;
            display: inline-block;
            line-height: 24px;
            height: 24px;
            font-size: 24px;
            left: 80px;
            top: 17px;
            color: #fff;
            text-align: left
        }

        .chat-receive-voice-page .chat-notice {
            position: absolute;
            display: inline-block;
            line-height: 12px;
            height: 12px;
            font-size: 12px;
            left: 80px;
            top: 51px;
            color: #fff
        }

        .chat-receive-voice-page .chat-close {
            position: absolute;
            display: inline-block;
            height: 26px;
            width: 26px;
            left: 254px;
            top: 20px;
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/600046a2072ab.png);
            background-size: contain
        }

        .chat-receive-voice-page .chat.........完整代码请登录后点击上方下载按钮下载查看