微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用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. code: 'ERR_OSSL_EVP_UNSUPPORTED' 报错解决

    报错: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/h ...

  2. （数据科学学习手札163）ibis：极具潜力的Python数据分析框架

    本文完整代码及附件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,今天要给大家介绍的Pyt ...

  3. Apache DolphinScheduler 社区 3 月月报

    各位热爱 DolphinScheduler 的小伙伴们,DolphinScheduler 社区月报开始更新啦!这里将记录 DolphinScheduler 社区每月的重要更新. 社区为 Dolphin ...

  4. 记一次 .NET某环境监测系统 崩溃分析

    一:背景 1. 讲故事 前些天有位朋友找到我,说他们的程序崩溃了,也自己分析了下初步结果,让我帮忙再确认下,既然让我确认,那就开始dump分析之旅吧. 二:WinDbg 分析 1. 为什么会崩溃 wi ...

  5. [学习笔记] 单调队列优化DP - DP

    单调队列优化DP 简单好想的DP优化 真正的教育是把学过的知识忘掉后剩下的东西 -- *** 对于一个转移方程类似于 \(dp[i]=max(min)\{dp[j]+b[j]+a[i]\}\ \ x_ ...

  6. spring声明事务失效问题

    问题:      在项目开发中遇到了一个spring事务失效的问题,检查配置文档,都没有问题,其他的类中的方法都能进行事务管理,而这个类中的方法却不行. 分析      查看代码发现三个问题: 原因1 ...

  7. stm32g070 不同channel区别

    1. TIM 2.UART

  8. C语言实现url解析小实例

    一.前言 前面一口君写了一篇关于url的文章: <一文带你理解URI 和 URL 有什么区别?> 本篇在此基础上,编写一个简单的用于解析url的小例子, 最终目标是解析出URL中所有的数据 ...

  9. 22张图详解浏览器请求数据包如何到达web服务器（搞懂网络可以毕业了）

    浏览器的请求数据包如何到达web服务器? 很多读者对于其中的完整流程不是特别的了解,下面一口君通过这22张图,详细的讲解我们点击浏览器的网址之后,数据包是如何经过重重险阻到达web server的. ...

  10. 强！34.1K star! 再见Postman，新一代API测试利器，功能强大、颜值爆表！

    1.引言 在当今的互联网时代,API(应用程序编程接口)已经成为连接不同软件系统的桥梁.作为一名开发者,掌握API测试技能至关重要.市面上的API测试工具琳琅满目,今天我们要介绍的是一款开源.跨平台的 ...