svg聊天即时通讯客服界面布局效果-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：svg聊天即时通讯客服界面布局效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>

    <style>
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            font-size: 62.5%;
            height: 100%;
        }

        button, input {
            border: 0;
            outline: none;
        }

        body {
            background: linear-gradient(45deg, #636f85, #6960a0);
        }

        .demo {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25rem;
            margin-left: -15rem;
            width: 30rem;
            height: 50rem;
            box-shadow: 0 1rem 5rem rgba(0, 0, 0, 0.3);
        }

        .static {
            height: 100%;
            font-size: 1.8rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
            background: #6D7ADA;
        }
        .static:before, .static:after {
            content: "";
            position: absolute;
            left: 7rem;
            width: 2rem;
            height: 2rem;
            margin-left: -1rem;
            margin-top: -1rem;
            border: 2px solid #fff;
            border-left: none;
            border-bottom: none;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-animation: arrows 1.5s infinite;
            animation: arrows 1.5s infinite;
        }
        .static:before {
            top: 15rem;
        }
        .static:after {
            top: 35rem;
        }
        .static__text {
            width: 9rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -5rem;
            -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
            color: #fff;
            -webkit-perspective: 1px;
            perspective: 1px;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .sidebar-content {
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
            width: 20rem;
            height: 100%;
            padding-top: 1rem;
            opacity: 0;
            -webkit-transition: opacity 200ms, z-index 0s 0s;
            transition: opacity 200ms, z-index 0s 0s;
            background-color: #E9EAF3;
            overflow: hidden;
        }
        .sidebar-content.active {
            z-index: 2;
            opacity: 1;
        }

        .contact {
            position: relative;
            width: 100%;
            height: 5rem;
            padding-left: 1.7rem;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            cursor: pointer;
            overflow: hidden;
        }
        .contact__photo {
            border-radius: 50%;
            margin-right: 1.5rem;
        }
        .contact__name {
            font-size: 1.2rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }
        .contact__status {
            position: absolute;
            top: 2.1rem;
            right: 1.5rem;
            width: 8px;
            height: 8px;
            border: 2px solid #00B570;
            border-radius: 50%;
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            transition: opacity 0.3s;
        }
        .contact__status.online {
            opacity: 1;
        }

        .search {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5.5rem;
            padding-left: 1.5rem;
            background: #fff;
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
        }

        svg {
            overflow: visible;
        }

        .sidebar {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .s-path {
            cursor: -webkit-grab;
            cursor: grab;
        }

        .cloned {
            position: absolute;
            z-index: 10;
            -webkit-transition: top 0.3s, left 0.3s;
            transition: top 0.3s, left 0.3s;
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
            -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
        .cloned.removed {
            -webkit-transition: opacity 0.2s 0;
            transition: opacity 0.2s 0;
            opacity: 0;
        }

        .chat {
            display: none;
            z-index: 5;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 2.5rem 0 5.5rem 2.5rem;
            -webkit-transition: opacity 200ms;
            transition: opacity 200ms;
            opacity: 0;
        }
        .chat.active {
            opacity: 1;
        }
        .chat.active:before {
            width: 100%;
        }
        .chat:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 0.5rem;
            background: #1CC6AE;
            width: 0;
            -webkit-transition: width 0.2s;
            transition: width 0.2s;
        }
        .chat__back {
            position: relative;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            margin-top: 0.5rem;
            margin-left: -0.6rem;
            cursor: pointer;
        }
        .chat__back:hover:before {
            -webkit-transform: translateX(-0.3rem) rotate(-45deg);
            transform: translateX(-0.3rem) rotate(-45deg);
        }
        .chat__back:before {
            content: "";
            position: absolute;
            display: block;
            top: 0.4rem;
            left: 0.6rem;
            width: 1.2rem;
            height: 1.2rem;
            border: 2px solid #545675;
            border-right: none;
            border-bottom: none;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
        }
        .chat__status {
            position: absolute;
            top: 2rem;
            right: 6.5rem;
            font-size: 1.2rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
            text-transform: uppercase;
            color: #B1A9A9;
        }
        .chat__person {
            display: inline-block;
            position: absolute;
            top: 3rem;
            right: 6.5rem;
            font-size: 2rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
            color: #36343D;
        }
        .chat__online {
            position: absolute;
            top: 50%;
            left: -1.5rem;
            margin-top: -3px;
            width: 8px;
            height: 8px;
            border: 2px solid #00B570;
            border-radius: 50%;
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            transition: opacity 0.3s;
        }
        .chat__online.active {
            opacity: 1;
        }
        .chat__messages {
            position: absolute;
            top: 7.5rem;
            left: 2.5rem;
            width: 27.5rem;
            height: 37rem;
            padding-right: 2.5rem;
            overflow-y: auto;
        }
        .chat__msgRow {
            margin-bottom: 0.5rem;
        }
        .chat__msgRow:after {
            content: "";
            display: table;
            clear: both;
        }
        .chat__message {
            display: inline-block;
            max-width: 60%;
            padding: 1rem;
            font-size: 1.4rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }
        .chat__message.mine {
            color: #2B2342;
            border: 1px solid #DFDFDF;
        }
        .chat__message.notMine {
            float: right;
            color: #23244E;
            background: #E9EAF3;
        }
        .chat__input {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 5.5rem;
            padding: 1rem 1rem 1rem 4rem;
            background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb60e648735a.png");
            background-repeat: no-repeat;
            background-position: 1rem 1.5rem;
            background-color: #E9EAF3;
            color: #2B2342;
            font-size: 1.4rem;
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
        }

        .ripple {
            position: absolute;
            width: 10rem;
            height: 10rem;
            margin-left: -5rem;
            margin-top: -5rem;
            background: rgba(0, 0, 0, 0.4);
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-animation: animRipple 0.3s;
            animation: animRipple 0.3s;
            border-radius: 50%;
        }

@-webkit-keyframes animRipple {
            to {
                -webkit-transform: scale(2.5);
                transform: scale(2.5);
                opacity: 0;
            }
        }

@keyframes animRipple {
            to {
                -webkit-transform: scale(2.5);
                transform: scale(2.5);
                opacity: 0;
            }
        }
@-webkit-keyframes arrows {
            to {
                -webkit-transform: translateX(100%) rotate(45deg);
                transform: translateX(100%) rotate(45deg);
                opacity: 0;
            }
        }
@keyframes arrows {
            to {
                -webkit-transform: translateX(100%) rotate(45deg);
                transform: translateX(100%) rotate(45deg);
                opacity: 0;
            }
        }
    </style>



</head>

<body translate="no">
    <div class="demo">
        <svg class="sidebar" viewBox="0 0 300 500">
            <path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />
        </svg>
        <div class="static">
            <div class="static__text">
                Pull white sidebar to the right
            </div>
        </div>
        <div class="sidebar-content">
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
                <span class="contact__name">Ethan Hawke</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
                <span class="contact__name">Natalie Portman</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
                <span class="contact__name">Kevin Spacey</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
                <span class="contact__name">Rosamund Pike</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
                <span class="contact__name">Robert Redford</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90".........完整代码请登录后点击上方下载按钮下载查看