css实现手机及时聊天通讯工具ui效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现手机及时聊天通讯工具ui效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="zh">
<head>
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<style>
    

body, html { font-size: 100%;   padding: 0; margin: 0;}


/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
        content: " ";
        display: table;
}

.clearfix:after {
        clear: both;
}

body{
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
* { margin: 0px; padding: 0px; }
body {
        background: #f0f1f2;
        font:12px "Open Sans", sans-serif; 
}
#view-code{
  color:#89a2b5;    
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:660px;
  left:50%;margin-left:-50px;
  z-index:200;
}
#view-code:hover{opacity:1;}
#chatbox{
        width:290px;
        background:#fff;
        border-radius:6px;
        overflow:hidden;
        height:484px;
        position:absolute;
        top:120px;
        left:50%;
        margin-left:-155px;
}

#friendslist{
        position:absolute;
        top:0;
        left:0;
        width:290px;
        height:484px;
}
#topmenu{
        height:69px;
        width:290px;
        border-bottom:1px solid #d8dfe3;        
}
#topmenu span{
        float:left;     
        width: 96px;
    height: 70px;
    background: url("//repo.bfw.wiki/bfwrepo/image/60920b25f1d58.png") -3px -118px no-repeat;
}
#topmenu span.friends{margin-bottom:-1px;}
#topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
#topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
#topmenu span.history{background-position:-190px 24px; cursor:pointer;}
#topmenu span.history:hover{background-position:-190px -47px; cursor:pointer;}
.friend{
        height:70px;
        border-bottom:1px solid #e7ebee;                
        position:relative;
}
.friend:hover{
        background:#f1f4f6;
        cursor:pointer;
}
.friend img{
        width:40px;
        border-radius:50%;
        margin:15px;
        float:left;
}
.floatingImg{
        width:40px;
        border-radius:50%;
        position:absolute;
        top:0;
        left:12px;
        border:3px solid #fff;
}
.friend p{
        padding:15px 0 0 0;                     
        float:left;
        width:220px;
}
.friend p strong{
  font-weight:600;
  font-size:15px;
        color:#597a96;  

}
.friend p span{
        font-size:13px;
        font-weight:400;
        color:#aab8c2;
}
.friend .status{
        background:#26c281;
        border-radius:50%;      
        width:9px;
        height:9px;
        position:absolute;
        top:31px;
        right:17px;
}
.friend .status.away{background:#ffce54;}
.friend .status.inactive{background:#eaeef0;}
#search{
        background:#e3e9ed url("//repo.bfw.wiki/bfwrepo/icon/5dbedab8b0577.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_30,h_30,/quality,q_90") 20px 16px no-repeat;
        height:60px; 
        width:290px;
        position:absolute;
        bottom:0;
        left:0;
}
#searchfield{
        background:#e3e9ed;
        margin:21px 0 0 55px;
        border:none;
        padding:0;
        font-size:14px;
        font-family:"Open Sans", sans-serif; 
        font-weight:400px;
        color:#8198ac;
}
#searchfield:focus{
         outline: 0;
}
#chatview{
        width:290px;
        height:484px;
        position:absolute;
        top:0;
        left:0; 
        display:none;
        background:#fff;
}
#profile{
        height:153px;
        overflow:hidden;
        text-align:center;
        color:#fff;
}
.p1 #profile{
        background:#fff url("//repo.bfw.wiki/bfwrepo/image/604a26e01dd36.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90") 0 0 no-repeat;
}
#profile .avatar{
        width:68px;
        border:3px solid #fff;
        margin:23px 0 0;
        border-radius:50%;
}
#profile  p{
        font-weight:600;
        font-size:15px;
        margin:118px 0 -1px;
        opacity:0;
        -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
#profile  p.animate{
        margin-top:97px;
        opacity:1;
        -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); 
}
#profile  span{
        font-weight:400;
        font-size:11px;
}
#chat-messages{
        opacity:0;
        margin-top:30px;
        width:290px;
        height:270px;
        overflow-y:scroll;      
        overflow-x:hidden;
        padding-right: 20px;
        -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
           -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
            -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
             -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
                transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#chat-messages.animate{
        opacity:1;
        margin-top:0;
}
#chat-messages label{
        color:#aab8c2;
        font-weight:600;
        font-size:12px;
        text-align:center;
        margin:15px 0;
        width:290px;
        display:block;  
}
#chat-messages div.message{
        padding:0 0 30px 58px;
        clear:both;
        margin-bottom:45px;
}
#chat-messages div.message.right{
          padding: 0 58px 30px 0;
          margin-right: -19px;
          margin-left: 19px;
}
#chat-messages .message img{
          float: left;
          margin-left: -38px;
          border-radius: 50%;
          width: 30px;
          margin-top: 12px;
}
#chat-messages div.message.right img{
        float: right;   
    margin-left: 0;
        margin-right: -38px;    
}
.message .bubble{       
        background:#f0f4f7;
        font-size:13px;
        font-weight:600;
        padding:12px 13px;
        border-radius:5px 5px 5px 0px;
        color:#8495a3;
        position:relative;
        float:left;
}
#chat-messages div.message.right .bubble{
        float:right;
        border-radius:5px 5px 0px 5px ;
}
.bubble .corner{
        background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAIAAABLMMCEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI5QjMyQzJBRDhCODExRTRCMDkzQ0UzOEQ3NzEzQUFGI.........完整代码请登录后点击上方下载按钮下载查看