微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用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 使用中的一些例子

    本文紧接前文: .gitignore文件的使用方法(学习总结版)-- .gitignore 文件的配合用法 ============================================= ...

  2. 利用XtraBackup对MGR集群进行扩容

    运行了一段时间以后MGR集群,需要扩容节点,这是一个常见的需求.很多时候我们都喜欢用mysqldump工具来进行,因为这个工具有一个很好用的参数叫做master-data以及single-transa ...

  3. 零基础学习人工智能—Python—Pytorch学习（六）

    前言 本文主要讲神经网络的上半部分. 另外,我发现我前面文章写的有歧义的地方还是挺多,虽然,已经改了一部分,但,可能还有没发现的,大家看的时候尽量多理解着看吧. 本着目的是学会使用神经网络的开发,至于 ...

  4. [学习笔记]在不同项目中切换Node.js版本

    @ 目录 使用 Node Version Manager (NVM) 安装 NVM 使用 NVM 安装和切换 Node.js 版本 为项目指定 Node.js 版本 使用环境变量指定 Node.js ...

  5. 零基础学习人工智能—Python—Pytorch学习（八）

    前言 本文介绍卷积神经网络的上半部分. 其实,学习还是需要老师的,因为我自己写文章的时候,就会想当然,比如下面的滑动窗口,我就会想当然的认为所有人都能理解,而实际上,我们在学习的过程中之所以卡顿的点多 ...

  6. ElasticSearch-hard插件及IK分词器安装

    ElasticSearch-hard插件及IK分词器安装 编辑 ​ 通过上一篇学习,我们学会了ElasticSearch的安装及访问到了如下页面: 编辑 ​ ElasticSearch-head插件安 ...

  7. Word在不同电脑排版异常

    Word在不同电脑排版异常 问题描述 今天又有同学向我抱怨用 word 写的论文明明在自己的电脑格式调的好好的,怎么在导师那格式又乱了,害的挨批. 笔者也遇到过该问题,正好趁这次机会简单整理一下. 注 ...

  8. how to create rpm

    RPM Spec 中各个字段的 pre, post, preun, postun 的用法 https://www.golinuxhub.com/2018/05/how-to-execute-scrip ...

  9. 丝滑解决Chatgpt频繁奔溃、断网掉线问题

    事件缘由 这段时间使用Chatgpt的时候频繁出现something wrong等断网掉线问题,中间还频繁出现物品转向的人机验证(我那么具有迷惑性吗...),被烦的不行.后面了解到有一个KeepCha ...

  10. Docker基本概念（LXC？镜像、容器、仓库是什么？容器和虚拟机又是什么？）（一）

    学习Docker前,我们有必要了解下Docker的前生LXC(Linux Container). 一.LXC介绍 LXC 可以提供轻量级的虚拟化,用来隔离进程和资源,和我们传统观念中的全虚拟化完全不一 ...