js+css实现一个简约聊天对话框效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css实现一个简约聊天对话框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
    height: calc(100vh - 32px);
    font-family: Roboto, sans-serif;
    margin : 0px;
    background-image: url('data:image/svg+xml,%3Csvg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  }
  
  .main-card {
    background:white;
    color:white;
    width: 80%;
    height: calc(100% - 32px);
    margin: 16px auto;
    border-radius: 8px;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display:flex;
    flex-direction:column;
    overflow: hidden;
  }
  
  .main-title {
    background-color: rebeccapurple;
    font-size: large;
    font-weight: bold;
    padding:32px;
  }
  .main-title svg{
    height: 16px;
     margin: 0px 8px
  }
  
  .chat-area {
    flex-grow: 1;
    overflow: auto;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }
  .input-message {
    padding: 8px 24px;
    flex-grow: 1;
    margin: 0px 8px 0px 0px;
    border-radius: 24px;
    border: none;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .input-message:focus{
    outline :none;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
  }
  .input-div {
    height: 48px;
    width: calc(100% - 32px);
    margin: 16px;
    display: flex;
  }
  .mic{
    background :rebeccapurple;
    width: 48px;
    height: 48px;
    margin-right: 8px;
    border-radius: 24px;
    border: none;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .mic:hover{
    cursor:pointer;  
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
  }
  .mic svg{
    fill:white;
    margin:11px 11px;
  }
  
  .input-send {
    background :rebeccapurple;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .input-send:hover{
    cursor:pointer;  
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
  }
  .input-send svg{
    fill:white;
    margin:11px 8px;
  }
  .chat-message-div {
    display: flex;
  }
  
  .chat-message {
    background-color: white;
    margin: 8px 16px;
    padding: 16px 24px;
    animation-name: fadeIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 100ms;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.11);
    color:black;
    border-radius: 50px;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
</style>

  
</head>

  <body>
      <div class="main-card">
    <div class="main-title"><svg viewBox="0 0 24 24">
      <path fill="currentColor" d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z" />
      
      </svg><span>Chatbot</span></div>
    <div class="chat-area" id="message-box">

    </div> 
     
    <div class="input-div">

      <div class="inout-mic mic voice ">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
        width="27" height="27 "
        viewBox="0 0 172 172"
 .........完整代码请登录后点击上方下载按钮下载查看