一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!

简介: 一键复制微信聊天框效果:HTML+CSS让网页聊天更生动!

先上效果



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



完整代码


 HTML:

<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>

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;
}
相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
40 1
|
10天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
40 1
简单几行代码CSS实现网页自动打文字效果
|
27天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
10天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
40 4
|
2月前
|
前端开发
一键复制HTML+CSS动画 打造炫酷的搜索框
一键复制HTML+CSS动画 打造炫酷的搜索框
|
2月前
|
前端开发 开发者
CSS样式覆盖规则详解,让你的网页更加出彩!
【8月更文挑战第23天】在Web前端开发中,理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时,哪些规则生效?本文通过实例解析这些规则。简单案例中,`.error`类选择器优先级高于`p`标签,文字显示红色。复杂案例涉及`.important`类与`!important`关键字,此时文字变为绿色。另外,内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
77 0
|
2月前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul &gt; li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
29 0
|
2月前
|
前端开发 JavaScript
一键复制HTML+CSS动画:让轮播图效果酷炫升级!
一键复制HTML+CSS动画:让轮播图效果酷炫升级!
下一篇
无影云桌面