实现气泡效果的聊天框
发布日期:2021-11-21 16:35:55 浏览次数:5 分类:技术文章

本文共 2527 字,大约阅读时间需要 8 分钟。

1.css3中通过border-radius实现圆角效果

.radius{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
2.通过实现一个三角形充当气泡的尾巴,将容器的宽度以及高度设置为0,然后给盒容器设置一个较粗的边框,浏览器会在边框的交界处绘制结合线
.triangle{
    height:0px;
    width:0px;
    border-width:20px;
    border-style:solid;
    border-color:green transparent  transparent  transparent;
}

为了减少不必须要的html元素,我们通过伪属性来给对话框添加”尾巴“

.left:before{
    position:absolute;
    content:"\00a0";
    width:0px;
    height:0px;
    border-width:8px 18px 8px 0;
    border-style:solid;
    border-color:transparent #A6DADC transparent transparent;
    top:15px;
    left:-18px;
}
.right:before{
    position:absolute;
    content:"\00a0";
    display:inline-block;
    width:0px;
    height:0px;
    border-width:8px 0px 8px 18px;
    border-style:solid;
    border-color:transparent transparent transparent #A6DADC;
    left:250px;
    top:15px;
                    
}

3.第三步,通过hsla或者rgba实现半透明背景 目前输入框是通过十六进制来设置颜色

background-color:#A6DADC
还可以通过
background-color:rgb(166, 218,220)
background-color:rgba(166, 218,220,1)
background-color:hsl(182, 44%,76%)
background-color:rgba(182, 44%,76%,1)
在rgba模式中,前三个数字表示红,绿,蓝的值,取值范围为0~255,最后一个表示透明度
在hsla模式中,前三个数字分别表示色调(取值范围为0~360),饱和度(0%~100%),和亮度(0%~100%),最后一个参数表示透明度。
接下来聊天对话框设置一个背景渐变的效果,使背景框更加立体:
可以将linear-gradient,radial-gradient赋值给任何接受图片的属性
background-image:-moz-linear-gradient(hsla(0,0%,100%, 0.6), hsla(0, 0%, 100%, 0)  30px);
background-image:-webkie-gradient(linear, 0 0, 0 30, from(hsla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));
给对话框添加阴影,使其有立体的效果:
box-shadow属性可以给盒容器添加阴影效果,我们需要设置阴影相对盒容器水平以及垂直方向上的偏移,阴影的颜色以及模糊半径和扩展半径
-moz-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
-webkit-box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
box-shadow:1px 1px 2px hsla(0, 0%, 0%, 0.3);
对话框外围有一层阴影,看起来更加立体,第一个1px表示阴影相对盒容器右移1px,第二个1px表示将阴影相对盒容器下移1px,可以设置为负数像相反的方向偏移。2px表示模糊半径,该值越大越模糊,越小边缘越锐利。
当鼠标移动到对话框的时候,改变对话框的位置以及阴影的大小,仿佛气泡弹出来一样
.talk:hover{
    top:-2px;
    left:-2px;
    -moz-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
    -webkit-box-shadow:3px 3px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow:3px 3px 2x hsla(0, 0%, 0%, 0.3);
                    
}

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arrow</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #box{
            position: relative;
            top:100px;
            left:100px;
            width: 140px;
            height: 100px;
            background: #088cb7;
            -moz-border-radius: 12px;
            -webkit-border-radius: 12px;
            border-radius: 12px;
        }
        #box:before{
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            right: 100%;
            top: 38px;
            border-top: 13px solid transparent;
            border-right: 26px solid #088cb7;
            border-bottom: 13px solid transparent;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

转载地址:https://blog.csdn.net/yyychocolate/article/details/108266435 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:instanceof实现
下一篇:版本号排序

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月08日 04时10分46秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

php pclzip.lib.php,php使用pclzip类实现文件压缩的方法(附pclzip类下载地址) 2019-04-21
php dns更新,php_mzdns: 站群,大量域名 通过 dns 服务商 api 批量添加 ip 工具。你懂的~ 基于 mzphp2 框架。... 2019-04-21
jdk 1.8 java.policy,JDK1.8 导致系统报错:java.security.InvalidKeyException:illegal Key Size 2019-04-21
php linux权限,Linux权限详细介绍 2019-04-21
典型环节的matlab仿真分析,典型环节的MATLAB仿真.doc 2019-04-21
Php contenttype类型,各种类型文件的Content Type 2019-04-21
php使用redis持久化,redis如何持久化 2019-04-21
php7.1解压包安装,【Swoole】php7.1安装swoole扩展 2019-04-21
linux centos删除安装的包,CentOS yum认为已删除的软件包仍在安装中 2019-04-21
酒店管理系统c语言带注释,酒店管理系统--C语言版.pdf 2019-04-21
c语言 实现sizeof功能,C语言简单实现sizeof功能代码 2019-04-21
c语言sin函数近似值,用泰勒公式求sin(x)的近似值 2019-04-21
c 语言登录系统源代码,c语言源代码---------------个人图书管理系统 2019-04-21
android线程通信方式,Android 主线程和子线程通信问题 2019-04-21
cps1 cps2 android,图文教程:CPS1和CPS2模拟器使用 2019-04-21
在线设计 html5 表单,html5注册表单制作-表单制作-小程序表单制作 2019-04-21
android小闹钟课程设计,《小闹钟》教学设计 2019-04-21
mysql文件系统_MySQL文件系统先睹为快(1) 2019-04-21
nums在python_程序找到一对(i,j),其中nums [i] + nums [j] +(i -j)在Python中最大化?... 2019-04-21
jquery后台内容管理_教育平台项目后台管理系统:课程内容模块 2019-04-21