微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用HTML和CSS技术，在自己的网页上实现类似微信的聊天框效果。我们将一步步指导您完成，让网站或应用也能拥有专业且用户友好的聊天功能。

1.HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" type="twxt/css" href="code6_29.css">

</head>

<body>

    <div class="box">

        <div class="leftBox">

            <img src="./1.png" width="40" height="40" />

            <div class="left">

                你好啊

            </div>

        </div>

        <div class="rightBox" style="justify-content: flex-end;">

            <div class="right">你好~~</div>

            <img src="./2.png" width="40" height="40" />

        </div>

        <div style="clear: both;"></div>

    </div>

</body>

</html>

2.css

.box {

    width: 300px;

    padding: 30px;

    ;

    margin: 100px auto;

    background-color: #f5f5f5;

}

.left,

.right {

    width: 80px;

    height: 40px;

    border-radius: 5px;

    background-color: #95ec69;

    position: relative;

    margin: 10px 0;

    line-height: 40px;

}

.leftBox,

.rightBox {

    display: flex;

    flex-direction: row;

    align-items: center;

    img {

        border-radius: 50%;

    }

}

.left {

    margin-left: 20px;

    padding-left: 5px;

}

.right {

    float: right;

    margin-right: 20px;

    padding-left: 5px;

}

.left::before {

    content: "";

    width: 0;

    height: 0;

    position: absolute;

    /* 边框宽度为5px 颜色透明(也就是隐藏) */

    border: 5px solid transparent;

    /* 箭头向左 则右边框显示 */

    border-right-color: #95ec69;

    /* 在div左边展示 偏移量为 边框宽度*2 即5*2px */

    left: -10px;

    /*垂直居中计算*/

    /*如果有高度 则(父元素高度 - 子元素高度 )/2 */

    /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */

    /* (40-5*2)/2=15 */

    top: 15px;

}

.right::before {

    content: "";

    width: 0;

    height: 0;

    position: absolute;

    /* 边框宽度为5px 颜色透明(也就是隐藏) */

    border: 5px solid transparent;

    /* 箭头向右 则左边框显示 */

    border-left-color: #95ec69;

    /* 在div右边展示 偏移量为 边框宽度*2 即5*2px */

    right: -10px;

    /*垂直居中计算*/

    /*如果有高度 则(父元素高度 - 子元素高度 )/2 */

    /*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */

    /* (40-5*2)/2=15 */

    top: 15px;

}

css动画（仿微信聊天页面）的更多相关文章

  1. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  2. CSS3 仿微信聊天小气泡

    今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...

  3. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  4. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  5. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  6. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  7. iOS开发之微信聊天页面实现

    在上篇博客(iOS开发之微信聊天工具栏的封装)中对微信聊天页面下方的工具栏进行了封装,本篇博客中就使用之前封装的工具栏来进行聊天页面的编写.在聊天页面中主要用到了TableView的知识,还有如何在俩 ...

  8. iOS 即时通讯 + 仿微信聊天框架 + 源码

    这些你造吗? 即时通讯(IM),在IOS这片江湖里面已经算是一个老者了,我这小旋风也是在很早以前巡山的时候,就知道有即时通讯这个妖怪,以前也多多少少接触过一些,在造APP的时候用过,哎呀,说着说着就感 ...

  9. HTML5仿微信聊天界面、微信朋友圈实例

    这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...

  10. 网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 本文讲描述, 如何在网页端实现一个仿微信 ...

随机推荐

  1. git clone 如何通过proxy进行远程代码仓库拷贝下载

    git使用proxy的方式和ssh的情况是差不多的,给出借鉴: SSH如何通过proxy进行服务器连接 ------------------------------------------------ ...

  2. java集合专题之Collection接口

    1.背景 集合是java中非常重要的技术点,也是面试经常问到的技术点.... 2.集合体系 单列集合 双列集合,key value集合 如果出去面试,这体系应该可以背出来,才算合格 3.常用方法 代码 ...

  3. Apache SeaTunnel k8s 集群模式 Zeta 引擎部署指南

    SeaTunnel提供了一种运行Zeta引擎(cluster-mode)的方法,可以让Kubernetes在本地运行Zeta引擎,实现更高效的应用程序部署和管理.在本文中,我们将探索SeaTunnel ...

  4. SMU Summer 2023 Contest Round 5

    SMU Summer 2023 Contest Round 5 A. Points in Segments \(\mathcal{O}(n \times m)\) 做法数据范围小,直接把每次的\(l ...

  5. 汇编跳转指令B、BL、BX、BLX 和 BXJ的区别

    跳转指令用于实现程序流程的跳转,在 ARM 程序中有两种方法可以实现程序流程的跳转: (1) 使用专门的跳转指令. (2) 直接向程序计数器 PC 写入跳转地址值. 通过向程序计数器 PC 写入跳转地 ...

  6. 智能指针相关：enable_shared_from_this()在开发中的常见应用

    类中使用shared_ptr()的问题 当我们先定义一个指针,然后再用这个指针构造两个智能指针 int main() { int* pt = new int(); std::shared_ptr< ...

  7. Python开发中，日期时间的相关处理

    在Python开发中,日期和时间处理是一个常见的需求.Python提供了多种模块和方法来处理日期和时间,以下是一些常用的模块和操作.通过介绍一些系统的Python类库以及第三方的类库,我们可以快速的实 ...

  8. 树上倍增求 LCA 模板

    void dfs(int x,int fa,int d){ deep[x]=d;dp[x][0]=fa; for(int i=1;i<=lg2[deep[x]];++i){ dp[x][i]=d ...

  9. 对GEE下载时分块影像进行镶嵌（GDAL）

    前言 GDAL自带的镶嵌功能比较单一,只能将图像简单拼接到一起,不能实现直方图匀色以及羽化等功能,但是对GEE导出的分块影像进行镶嵌较为适合. 优点: 使用代码,镶嵌多个影像较为简便 GDAL较为稳定 ...

  10. C#自定义控件—仪表盘

    C#用户控件之仪表盘 如何让温度.湿度.压力等有量程的监控值如仪表盘(DashBoard)一样显示? 思路(GDI绘图): 定义属性:(仪表盘的半径.颜色.间隙:刻度圆的半径.颜色.字体:指针的颜色. ...