css简洁聊天即时通讯UI界面效果代码
代码语言:html
所属分类:布局界面
代码描述:css简洁聊天即时通讯UI界面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <style> @import url("https://fonts.googleapis.com/css?family=Lato:400,700"); html { display:grid; min-height:100% } body { display:grid; background:linear-gradient(to bottom left,#79C7C5 40%,#F9FBFF 100%); font-family:"Lato",sans-serif } .container { position:relative; margin:12% auto; width:620px; height:450px } .messages { position:absolute; background:#F9FBFF; opacity:.5; width:30%; height:70%; top:2.5%; left:5%; border-radius:10px 0 0 10px; box-shadow:-5px 5px 10px rgba(119,119,119,0.5) } .people { position:absolute; list-style-type:none; width:30.2%; left:-10px; top:24.7%; line-height:.7em } .people .title { text-transform:uppercase; font-size:.7em; margin-left:14px; letter-spacing:1px; color:#777 } .people .time { font-size:.3em; color:#777; position:absolute; right:10px; margin-top:2px } .people .preview { color:#79C7C5; margin-left:14px; font-size:.5em } .person { padding:12px 0 12px 12px; border-bottom:1px solid #79C7C5; cursor:pointer } .person:hover { background:#F9FBFF; transition:all .3s ease-in-out } .focus { background:#F9FBFF; margin-left:1px } .profile { position:absolute; left:16%; top:7% } .name2 { position:absolute; top:50px; left:2px; text-transform:uppercase; color:#79C7C5; font-size:.8em; letter-spacing:2px; font-weight:500 } .email { color:#F9FBFF; font-size:.5em; margin-left:-30px; margin-top:2px } .chatbox { position:absolute; left:35%; height:75%; width:60%; border-radius:10px; box-shadow:5px 5px 15px rgba(119,119,119,0.5) } .top-bar { width:100%; height:60px; background:#F9FBFF; border-radius:10px 10px 0 0 } .avatar { width:35px; height:35px; background:linear-gradient(to bottom left,#79C7C5 20%,#A1E2D9 100%); border-radius:50%; position:absolute; top:11px; left:15px } .avatar p { color:#F9FBFF; margin:7px 12px } .name { position:absolute; top:22px; text-transform:uppercase; color:#777; font-size:.8em; letter-spacing:2px; font-weight:500; left:60px } .menu { position:absolute; right:10px; top:20px; width:10px; height:20px; cursor:pointer } .menu:hover { transform:scale(1.1); transition:all .3s ease-in } .icons { position:absolute; color:#A1E2D9; padding:10px; top:5px; right:21px; cursor:pointer } .icons .fas { padding:5px; opacity:.8 } .icons .fas:hover { transform:scale(1.1); transition:all .3s ease-in } .dots { width:4px; height:4px; border-radius:50%; background-color:#79C7C5; box-shadow:0 7px 0 #79C7C5,0px 14px 0 #79C7C5 } .middle { position:absolute; background:#F9FBFF; width:100%; opacity:.85; top:60px; height:80% } .incoming { position:absolute; width:50%; height:100%; padding:20px } .incoming .bubble { background:#b2b2b2 } .typing { position:absolute; top:67%; left:20px } .typing .bubble { background:#eaeaea; padding:8px 13px 9px 13px } .ellipsis { width:5px; height:5px; display:inline-block; background:#b7b7b7; border-radius:50%; animation:bounce 1.3s linear infinite } .one { animation-delay:.6s } .two { animation-delay:.5s } .three { animation-delay:.8s } .bubble { position:relative; display:inline-block; margin-bottom:5px; color:#F9FBFF; font-size:.7em; padding:10px 10px 10px 12px; border-radius:20px } .lower { margin-top:45px } .outgoing { position:absolute; padding:20px; right:0; top:15%; width:50%; height:100% } .outgoing .bubble { background:#79C7C5; float:right } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0