在html中制作聊天框

Question

我想为我的网站制作一个聊天框，它应该固定在页面的右下角位置。当有人点击它时，它应该向上滑动并且可以在其中看到详细信息。我正在使用 html、css、jquery。仅从这些建议帮助。

Answer 1

您可以查看 socket.io 的示例进行聊天。 https://socket.io/get-started/chat/

设计：https : //codepen.io/oktaykose/pen/aypyvg

.chat-box{
    position: absolute;
    bottom: 0;
    right: 0;
}
.box{
    transition: height 1s ease-out;
    width: 300px;
    height: 0px;
    background: red;
    z-index: 9999;
}
.open:hover>.box{
  height:400px;
      transition: height 1s ease-out;
}
.open {
    text-align: center;
    font-size: 20px;
    border: 2px solid #3F51B5;
    background: #673AB7;
    color: #eaeaea;
}

<div class="chat-box">
  <div class="open">Open
  <div class="box">
    <br>
    Test
    <br>
  </div>
    <div>
<div>