css实现手机及时聊天通讯工具ui效果代码
代码语言: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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjI5QjMyQzJBRDhCODExRTRCMDkzQ0UzOEQ3NzEzQUFGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjI5QjMyQzJCRDhCODExRTRCMDkzQ0UzOEQ3NzEzQUFGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjlCMzJDMjhEOEI4MTFFNEIwOTNDRTM4RDc3MTNBQUYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjlCMzJDMjlEOEI4MTFFNEIwOTNDRTM4RDc3MTNBQUYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4yG63cAAAATklEQVR42kyMUQ6AMAxCnfH+l/VjtqVUFnWThIQ8WlpVbZ8uhwUU9onUOvDkRYXm20uTNMe8OORAdo81L3p2I/9kqJFEMlka0a4s3QIMAFs5OUyXcow6AAAAAElFTkSuQmCC") 0 0 no-repeat; position:absolute; width:7px; height:7px; left:-5px; bottom:0; } div.message.right .corner{ background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAIAAABLMMCEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRBMjAyRDBFRDhCQzExRTRBNzBDOTRBMjZCNDdFODlBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRBMjAyRDBGRDhCQzExRTRBNzBDOTRBMjZCNDdFODlBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEEyMDJEMENEOEJDMTFFNEE3MEM5NEEyNkI0N0U4OUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEEyMDJEMEREOEJDMTFFNEE3MEM5NEEyNkI0N0U4OUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5uwG5BAAAAVUlEQVR42lyN2wrAMAhDNe0u//+le9itats5yhgYkIQjJLztFxEtU17nTJ8wTMx6p0gd+SNSVxGrrUXqBcctatXzvzB6zqJQeykzw48pAQmcEx4BBgDyDyCxo8S1ewAAAABJRU5ErkJggg==") 0 0 no-repeat; left:auto; right:-5px; } .bubble span{ color: #aab8c2; font-size: 11px; position: absolute; right: 0; bottom: -22px; } #sendmessage{ height:60px; border-top:1px solid #e7ebee; position:absolute; bottom:0; right:0px; width:290px; background:#fff; padding-bottm:50px; } #sendmessage input{ border } #sendmessage input{ background:#fff; margin:21px 0 0 21px; border:none; padding:0; font-size:14px; font-family:"Open Sans", sans-serif; font-weight:400px; color:#aab8c2; } #sendmessage input:focus{ outline: 0; } #sendmessage button{ background:#fff url("//repo.bfw.wiki/bfwrepo/icon/5e462c5da1de6.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_20,h_20,/quality,q_90") 0 0px no-repeat; width:30px; height:30px; position:absolute; right: 15px; top: 23px; border:none; } #sendmessage button:hover{ cursor:pointer; } #sendmessage button:focus{ outline: 0; } #close{ position:absolute; top: 8px; opacity:0.8; right: 10px; width:20px; height:20px; cursor:pointer; } #close:hover{ opacity:1; } .cx, .cy{ background:#fff; position:absolute; width:0px; top:15px; right:15px; height:3px; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .cx.s1, .cy.s1{ right:0; width:20px; -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease.........完整代码请登录后点击上方下载按钮下载查看
网友评论0