微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用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. java获取包下所有的类

    1.背景 给一个Java的包名,获取包名下的所有类.. 根据类上的注解,可以展开很多统一操作的业务 2.直接看代码-spring环境下 package com.qxnw.digit.scm.commo ...

  2. [POI2008] POC-Trains 题解

    前言 题目链接:洛谷. 时间复杂度和输入同阶的做法. 题意简述 有 \(n\)(\(n \leq 10^3\))个长 \(m\) 的字符串,\(q\)(\(q \leq 10^5\))次操作,交换两个 ...

  3. 部署CPU与GPU通用的tensorflow：Anaconda环境

      本文介绍在Anaconda环境中,下载并配置Python中机器学习.深度学习常用的新版tensorflow库的方法.   在之前的两篇文章Python TensorFlow深度学习回归代码:DNN ...

  4. VUE—CLI学习

    https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create 需要的自己来看吧 关于旧版本 Vue CLI 的包名称由 vue-c ...

  5. 知攻善防Web1应急靶机笔记--详解

    知攻善防Web1应急靶机笔记 概述 这是一台知攻善防实验室的应急响应靶机,方便大家练习一下应急响应的流程和操作. 靶机的前景概述: 前景需要: 小李在值守的过程中,发现有CPU占用飙升,出于胆子小,就 ...

  6. 2024 (ICPC) Jiangxi Provincial 省赛

    2024 (ICPC) Jiangxi Provincial 省赛 前言 和队友 vp 7t,赛后补了几题. A. Maliang Learning Painting 思路 输出 a + b + c ...

  7. md2pdf

    https://www.pandoc.org/installing.html https://github.com/jgm/pandoc/releases/tag/2.18 https://blog. ...

  8. Linux中级——“驱动” 控制硬件必须学会的底层知识

    驱动认知 1. 什么是驱动 驱动就是对底层硬件设备的操作进行封装,并向上层提供函数接口. 设备分类: linux系统将设备分为3类:字符设备.块设备.网络设备. 字符设备:指只能一个字节一个字节读写的 ...

  9. Ansible-playbook 应用梳理

    前面已经介绍过Ansible的安装配置及常见模块的使用 --<Linux下使用Ansible处理批量操作> Palybook简介 palybook是由一个或多个paly组成的列表,play ...

  10. NVM 使用

    NVM(Node Version Manager)是 Node.js 的版本管理工具. NVM 项目为 macOS 和 Linux 开发.Windows 用户需要使用 NVM for Windows. ...