css布局实现一个简易文字聊天通讯录窗口效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个建议文字聊天通讯录窗口效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <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: 0.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); } /*chat messages */ .people { position: absolute; list-style-type: none; width: 30.2%; left: -10px; top: 24.7%; line-height: 0.7em; } .people .title { text-transform: uppercase; font-size: 0.7em; margin-left: 14px; letter-spacing: 1px; color: #777777; } .people .time { font-size: 0.3em; color: #777777; position: absolute; right: 10px; margin-top: 2px; } .people .preview { color: #79C7C5; margin-left: 14px; font-size: 0.5em; } .person { padding: 12px 0 12px 12px; border-bottom: 1px solid #79C7C5; cursor: pointer; } .person:hover { background: #F9FBFF; transition: all 0.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: 0.8em; letter-spacing: 2px; font-weight: 500; } .email { color: #F9FBFF; font-size: 0.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: #777777; font-size: 0.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 0.3s ease-in; } .icons { position: absolute; color: #A1E2D9; padding: 10px; top: 5px; right: 21px; cursor: pointer; } .icons .fas { padding: 5px; opacity: 0.8; } .icons .fas:hover { transform: scale(1.1); transition: all 0.3s ease-in; } .dots { width: 4px; height: 4px; border-radius: 50%; background-color: #79C7C5; box-shadow: 0px 7px 0px #79C7C5, 0px 14px 0px #79C7C5; } .middle { position: absolute; background: #F9FBFF; width: 100%; opacity: 0.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: 0.6s; } .two { animation-delay: 0.5s; } .three { animation-delay: 0.8s; } .bubble { position: relative; display: inline-block; margin-bottom: 5px; color: #F9FBFF; font-size: 0.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; } .bottom-bar { position: absolute; width: 100%; height: 55px; bottom: 0; background: #F9FBFF; border-radius: 0 0 10px 10px; } .left { left: 0px; } input { padding: 7px; width: 74%; left: 5%; position: absolute; border: 0; top: 13px; background: #F9FBFF; col.........完整代码请登录后点击上方下载按钮下载查看
网友评论0