css实现兼容手机和pc的自适应文字聊天客服窗口效果代码
代码语言:html
所属分类:响应式
代码描述:css实现兼容手机和pc的自适应文字聊天客服窗口效果代码
代码标签: css 兼容 手机 pc 自适应 文字 聊天 客服 窗口
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700" rel="stylesheet"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; transition: all 150ms ease-in-out; } button { border: 0; background-color: transparent; cursor: pointer; } div.minimize { height: 40px; } div.list--active { transform: translateX(0); } @media (max-width: 500px) { div.list--active { transform: translateX(50%); } } .conversation__bubble--left { position: relative; } .conversation__bubble--left .conversation__text { float: left; max-width: 85%; color: #e0f3ff; background-color: #4867cb; } .conversation__bubble--left:before { content: ""; position: absolute; bottom: -6px; left: 0; width: 8px; height: 8px; border-bottom-right-radius: 10px; background-color: #32488f; } .conversation__bubble--right { position: relative; } .conversation__bubble--right .conversation__text { float: right; max-width: 85%; color: #332400; background-color: #cbad48; } .conversation__bubble--right:before { content: ""; position: absolute; bottom: -6px; right: 0; width: 8px; height: 8px; border-bottom-left-radius: 10px; background-color: #8f7a32; } body { font-family: "Poppins", sans-serif; color: #122740; overflow-y: hidden; } .mask { width: 300px; height: 400px; overflow: hidden; position: absolute; bottom: 0; right: 5rem; border-top-left-radius: 10px; border-top-right-radius: 10px; animation: appear 1s ease-in 0s; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); transition: height 400ms cubic-bezier(0.65, 0.05, 0.36, 1); } @media (max-width: 500px) { .mask { right: 0; width: auto; height: 100vh; } } .container { width: 600px; height: 400px; display: flex; flex-direction: row; transform: translateX(-300px); transition: transform 400ms cubic-bezier(0.65, 0.05, 0.36, 1); } @media (max-width: 500px) { .container { width: 100%; height: 100%; transform: translateX(0); } } .list, .conversation { width: 300px; height: 400px; display: flex; flex-direction: column; background-color: #f5f7fa; } @media (max-width: 500px) { .list, .conversation { width: 100vw; height: 100vh; } } .list__header, .conversation__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; z-index: 1; min-height: 40px; border-bottom: 1px solid #ced4da; } .list__header-actions, .conversation__header-actions { display: flex; flex-direction: row; } .list__body, .conversation__body { height: 100%; padding: 0.8rem; position: relative; overflow-y: auto; background-color: #eff2f6; font-size: 14px; } .list .btn, .conversation .btn { width: 40px; height: 40px; } .list .btn svg, .conversation .btn svg { color: #1f4cad; } .list .btn:hover, .list .btn:focus, .conversation .btn:hover, .conversation .btn:focus { background-color: #1f4cad; } .list .btn:hover svg, .list .btn:focus svg, .conversation .btn:hover svg, .conversation .btn:focus svg { color: white; } .list__header { padding: 0 0.8rem; } .list__chat { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 1rem; margin-bottom: 1rem; background-color: #f5f7fa; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-radius: 3px; border: 1px solid transparent; cursor: pointer; } .list__chat:hover, .list__chat:focus { border: 1px solid #1f4cad; box-shadow: 0 0 3px #4867cb; } .list__user { margin-bottom: 0.3rem; } .list__message { display: inline-block; color: #484f56; width: 215px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 500px) { .list__message { width: 85%; } } .list__sent { display: inline-block; vertical-align: text-bottom; } .list__sent svg { width: 1rem; height: 1rem; stroke: #008500; } .list__sent svg:last-child { margin-left: -0.7rem; } .list__preview { width: 100%; } .conversation__info { display: inline-flex; flex-direction: row; align-items: center; flex-grow: 1; padding-left: 0.8rem; color: #243366; border-left: 1px solid #ced4da; } .conversation__status { width: 8px; height: 8px; border-radius: 50%; background-color: #63de17; margin-right: 0.4rem; } .conversation__bubble { margin-bottom: 0.8rem; } .conversation__bubble:before, .conversation__bubble:after { content: ""; display: block; clear: both; } .conversation__text { border-radius: 3px; padding: 0.6rem; overflow-wrap: break-word; } .conversation__footer { display: flex; flex-direction: row; justify-content: space-between; z-index: 1; padding: 0.8rem; border-top: 1px solid #ced4da; } .conversation__write { width: 80%; padding: 0.4rem; border: 0; border-radius: 5px; border: 1px solid #ced4da; font-family: "Poppins", sans-serif; font-size: 14px; } .conversation__write:focus { border: 1px solid #4867cb; box-shadow: 0 0 3px #4867cb; } .conversation .btn--send { border-radius: 3px; } @keyframes appear { 1% { transform: translateY(30px); opacity: 0; } 25% { transform: translateY(-15px); } 65% { transform: translateY(10px); opacity: 1; } 80% { transform: translateY(-5px); } 100% { transform: translateY(0); } } </style> </head> <body> <!-- Mask --> <div class="mask"> <!-- Main container --> <div class="container"> <!-- Chat list view --> <section class="list"> <!-- Chat list header --> <header class="list__header"> <span>Conversations</span> </header> <!-- Chat list --> <div class="list__body"> <!-- Chat conversation --> <a id="chat1" class="list__chat"> <div class="list__preview"> <h3 class="list__user">Nadia</h3> <span class="list__message">How is it going?</span> </div> </a> <!-- Chat conversation --> <a id="chat2" class="list__chat"> <div class="list__preview"> <h3 class="list__user">Susan</h3> <span class="list__sent"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0