css3实现气泡效果的聊天框
来源:互联网 发布:matlab矩阵叉乘 编辑:程序博客网 时间:2024/04/29 12:54
因为css3尚未形成标准,所以现行的浏览器对于css3支持不太一致,某些特性需要加上浏览器前缀
没有添加css3样式之前原始页面如下:
1.第一步,实现圆角效果,在css之前实现圆角效果比较麻烦,但是css3中通过border-radius可以很容易实现圆角效果
.radius{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
添加之后效果如图,border-radius:x/y,如果x和y不相同,x表示横轴,y表示纵轴,如果x和y不相同,那么绘制的为椭圆形。
可以通过设置border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius分别设置边框四个角的弧度。
2.第二步,添加气泡的尾巴。
可以通过css来实现一个三角形充当气泡的尾巴,将容器的宽度以及高度设置为0,然后给盒容器设置一个较粗的边框,浏览器会在边框的交界处绘制结合线
.triangle{height:0px;width:0px;border-width:20px;border-style:solid;border-color:green black blue red;}
绘制出的图形如下:
通过将另外三条边设置为透明的,即可得到一个三角形
.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);}
- css3实现气泡效果的聊天框
- 聊天气泡效果实现
- CSS3实现气泡效果
- 仿微信聊天气泡效果实现
- 仿微信聊天气泡效果实现
- 仿微信聊天气泡效果实现
- 实现QQ聊天气泡效果
- 网页聊天气泡效果实现
- 每天android分享: 聊天气泡效果的实现自动拉伸。
- android 仿微信聊天气泡效果实现思路
- 【HTML5】实现QQ聊天气泡效果
- 纯CSS实现聊天框小尖角、气泡效果
- 使用css实现QQ聊天气泡效果
- 纯CSS实现聊天框小尖角、气泡效果
- DUILIB 实现微信气泡聊天效果
- 【HTML5】简单实现QQ聊天气泡效果
- QQ聊天气泡拖动效果实现
- 气泡效果的实现
- 内核术语--内核模式,用户模式,内核对象,内核调试,安全,注册表,Unicode,驱动
- 用VS的rc.exe编译Redasm的*.rc文件
- vc载入快捷菜单
- Oracle中的in和exists区别二
- javascript事件简介
- css3实现气泡效果的聊天框
- Category、Data、Type属性与intent-filter配置
- 几何画板演示全反射
- 界面设计规范
- 浅谈fastDFS(下)
- Thread类调用run()方法和调用start()方法的区别
- JAVA笔记五(16-20 this、static、inherit、子类实例化及override)
- select和poll程序测试以及结果分析
- jquery上下左右无缝滚动-YlMarquee