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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看