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-voice-cancel {
            position: absolute;
            left: 50px
        }

        .chat-receive-voice-page .chat-voice-accept {
            position: absolute;
            right: 50px
        }

        .chat-receive-voice-page .chat-voice-btn {
            text-align: center;
            height: 100px;
            top: 192px
        }

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

        .chat-receive-voice-page .chat-voice-icon {
            display: inline-block;
            height: 50px;
            width: 50px;
            background-size: contain
        }

        .chat-receive-voice-page .chat-cancel {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e9ca2a7b.png);
            left: 50px
        }

        .chat-receive-voice-page .chat-accept {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e89ab155.png);
            right: 50px
        }

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

        .chat-voice-connect-page .chat-user-info {
            height: 70px;
            margin-top: 40px;
            position: relative
        }

        .chat-voice-connect-page .chat-avatar {
            margin-top: 40px
        }

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

        .chat-voice-connect-page .chat-nickname {
            font-size: 24px;
            color: #FFF;
            margin-top: 7.5px;
            text-align: center;
            width: 100%
        }

        .chat-voice-connect-page .chat-voice-time {
            text-align: center;
            width: 100%;
            font-size: 12px;
            color: #fff
        }

        .chat-voice-connect-page .chat-voice-icon {
            display: inline-block
        }

        .chat-voice-connect-page .chat-close-msg {
            margin-top: 10px;
            color: #fff;
            font-size: 12px;
            line-height: 12px
        }

        .chat-voice-connect-page .chat-close-microphone {
            margin-top: 44px;
            width: 56px;
            height: 56px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928eb6912cd.png)
        }

        .chat-voice-connect-page .chat-close-microphone:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928ebfbb282.png)
        }

        .chat-voice-connect-page .chat-open-microphone {
            margin-top: 44px;
            width: 56px;
            height: 56px;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928eb6912cd.png)
        }

        .chat-voice-connect-page .chat-open-microphone:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928eb6912cd.png)
        }

        .chat-voice-connect-page .chat-cancel,.chat-voice-connect-page .chat-cancel:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e9ca2a7b.png)
        }

        .chat-voice-connect-page .chat-cancel {
            margin-top: 30px;
            width: 50px;
            height: 50px
        }

        .chat-launch-video-page,.chat-video-connect-page {
            position: fixed;
            height: 640px;
            top: calc(50% - 320px)
        }

        .chat-launch-video-page {
            left: calc(50% - 180px);
            width: 360px
        }

        .chat-launch-video-page .chat-video-cover {
            height: 100%;
            width: 100%
        }

        .chat-launch-video-page p {
            color: #fff
        }

        .chat-launch-video-page .chat-avatar {
            position: absolute;
            left: 30px;
            top: 30px
        }

        .chat-launch-video-page .chat-nickname {
            position: absolute;
            left: 120px;
            top: 44px;
            font-size: 24px;
            line-height: 24px;
            height: 24px;
            width: 180px
        }

        .chat-launch-video-page .chat-notice {
            position: absolute;
            left: 120px;
            top: 84px;
            font-size: 12px;
            line-height: 12px;
            height: 12px
        }

        .chat-launch-video-page .chat-scale {
            position: absolute;
            right: 30px;
            top: 30px;
            width: 25px;
            height: 30px;
            display: inline-block;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e64293d9.png);
            background-repeat: no-repeat
        }

        .chat-launch-video-page .chat-video-bottom {
            width: 300px;
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            bottom: 40px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
        }

        .chat-launch-video-page .chat-video-btn {
            width: 95px;
            text-align: center
        }

        .chat-launch-video-page .chat-video-btn p {
            margin-top: 10px;
            font-size: 12px;
            line-height: 12px;
            height: 12px
        }

        .chat-launch-video-page .chat-video-icon {
            display: inline-block;
            background-size: contain;
            width: 56px;
            height: 56px
        }

        .chat-launch-video-page .chat-close-microphone,.chat-launch-video-page .chat-close-microphone:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928ebfbb282.png)
        }

        .chat-launch-video-page .chat-open-microphone,.chat-launch-video-page .chat-open-microphone:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928eb6912cd.png)
        }

        .chat-launch-video-page .chat-cancel,.chat-launch-video-page .chat-cancel:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e9ca2a7b.png)
        }

        .chat-launch-video-page .chat-switch-audio,.chat-launch-video-page .chat-switch-audio:active {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e512702e.png)
        }

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

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

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

        .chat-receive-video-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-video-page .chat-notice {
            position: absolute;
            display: inline-block;
            line-height: 12px;
            height: 12px;
            font-size: 12px;
            left: 80px;
            top: 51px;
            color: #fff
        }

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

        .chat-receive-video-page .chat-video-bottom {
            width: 280px;
            position: absolute;
            left: 40px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: distribute;
            justify-content: space-around;
            bottom: 18px
        }

        .chat-receive-video-page .chat-video-icon {
            display: inline-block;
            height: 50px;
            width: 50px;
            background-size: contain
        }

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

        .chat-receive-video-page .chat-cancel {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e9ca2a7b.png)
        }

        .chat-receive-video-page .chat-switch-audio {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e512702e.png)
        }

        .chat-receive-video-page .chat-accept {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e89ab155.png)
        }

        .chat-video-connect-page {
            width: 360px;
            left: calc(50% - 180px)
        }

        .chat-video-large {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0
        }

        .chat-video-connect-page p {
            color: #fff
        }

        .chat-video-connect-page .local-video {
            width: 120px;
            height: 72px;
            position: absolute;

            right: 30px;
            top: 30px;
            -o-object-fit: cover;
            object-fit: cover
        }

        .chat-video-connect-page .chat-local-video-large {
            width: 240px;
            height: 144px;
            left: 20px;
            top: 20px
        }

        .chat-video-connect-page .local-video-mobile {
            width: 120px;
            height: 72px;
            position: relative;
            left: 10px;
            top: 10px
        }

        .chat-video-connect-page .remote-video {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: -1;
            left: 0;
            top: 0
        }

        .chat-video-connect-page .chat-scale {
            position: absolute;
            right: 30px;
            top: 30px;
            width: 25px;
            height: 30px;
            display: inline-block;
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60928e64293d9.png);
            background-repeat: no-repeat
        }

        .chat-video-connect-page .chat-video-time {
            width: 300px;
            position: absolute;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            bottom: 180px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%)
        }

      .........完整代码请登录后点击上方下载按钮下载查看