微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用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. YouTube上的很多时视频就是有问题的，还经常不允许评论，妥妥的双标网站

    过多的事情不说了,这些个外国反华势力的网站真是无时无刻的不在视频中加私货,你想评论吧他还能判断你的个人价值观来预估你的评价倾向然后禁止你评价,十分的气人.要是立场不够坚定的人真的是很容易被带偏,像这种 ...

  2. ubuntu环境下boost库的安装——Could NOT find Boost (missing: Boost_INCLUDE_DIR program_options) (Required is at least version "1.49.0")

    在Ubuntu环境下使用cmake编译软件,报错,提示信息: Could NOT find Boost (missing: Boost_INCLUDE_DIR program_options) (Re ...

  3. 几乎纯css实现弹出框

    今天需要做一个弹出框,右下角提示的那种 ,看了一两个jquery的插件 总是不太满意 .一方面js内容太多,另一方面 不太好配合已经存在的样式使用.所以 就自己用css直接实现了下 效果还可以 . 上 ...

  4. Java核心技术之Date相关

    import java.time.DayOfWeek; import java.time.LocalDate; import java.util.Scanner; /** * @author Suns ...

  5. React 高德地图 进京证 路线规划 问题小记

    一.加载问题 用高德地图做了个进京证路线规划的功能,官网也是有 React 代码示例.但是吧,这个Demo有问题,地图是能加载成功,但是其他功能再用 map 这个变量肯定不行,果不其然是null,处理 ...

  6. 圣诞节快乐，教你用shell脚本实现一颗圣诞树。【小酷炫】

    前言 圣诞节到了! 一口君在这祝各位粉丝朋友圣诞节快乐! 祝各位考研的同学金榜题名! 祝找工作的朋友offer接到爆! 祝各位老板新年大发财源! 在此一口君特地用shell脚本画了一个圣诞树! 先来看 ...

  7. 2023 PTA天梯赛补题（L1 & L2）

    2023 天梯赛 L1 & L2 补题 L1 L1-089 最好的文档 输入输出题 #include<bits/stdc++.h> using namespace std; int ...

  8. 这才是java对象正解

    这才是 Java 对象正解 在深入讨论对象之前,让我们先明确对对象和实例的理解. 什么是对象? 对象(Object)是内存中分配的实际数据结构,它包含了数据和方法.在 Java 中,对象是类的一个实例 ...

  9. php预定义变量~$_SERVER[‘QUERY_STRING‘]

    php $_SERVER['QUERY_STRING']函数 • 简介$_SERVER函数( 获取当前服务器信息) 预定义变量就是系统自己定义好的变量,直接使用就可以.预定义变量都是以数组的形式存在的 ...

  10. WPF 模拟UWP原生窗口样式——亚克力|云母材质、自定义标题栏样式、原生DWM动画 （附我封装好的类）

    先看一下最终效果,左图为使用亚克力材质并添加组合颜色的效果:右图为MicaAlt材质的效果.两者都自定义了标题栏并且最大限度地保留了DWM提供的原生窗口效果(最大化最小化.关闭出现的动画.窗口阴影.拖 ...