html5 模仿语音聊天气泡,HTML5实现对话气泡动画方法

HTML5实现对话气泡点击动画

.select-toast{position:absolute;//确定对话的位置

top:3.4rem;right:0.2rem;width:1.45rem;//确定宽度，高度由文字撑开

padding:0.18rem;//确定文字距离对话框外部的距离

line-height:0.4rem;//确定文字的行高

color:#d06e5a;//文字颜色

background-color:rgba(255,255,255,0.85);//背景色，半透明

border-radius:0.2rem;//对话框圆角

opacity:0;//初始情况透明度为0

&::before{ //三角的制作

content:"";//伪元素必需

width:0;//本身的宽高为0

height:0;border-width:0.2rem;//三角形的高

border-color:transparent rgba(255,255,255,0.85) transparent transparent;//角朝左的三角形

border-style:solid;//边框为实心的

position:absolute;//三角的位置

left:-0.4rem;top:0.4rem;

}}

.select-toast.toastAni{-webkit-animation:toast 4s;//对话框的动画

animation:toast 4s;

}//对话框的动画定义

@-webkit-keyframes toast{8%{

opacity:0.8;-webkit-transform:scale(0.8);transform:scale(0.8);

}16%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);

}24%{opacity:1;-webkit-transform:scale(0.95);transform:scale(0.95);

}32%{opacity:1;-webkit-transform:scale(1);transform:scale(1);

}82.5%{opacity:1;-webkit-transform:scale(1);transform:scale(1);

}100%{opacity:0;

}}

@keyframes toast{8%{

opacity:0.8;-webkit-transform:scale(0.8);transform:scale(0.8);

}16%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);

}24%{opacity:1;-webkit-transform:scale(0.95);transform:scale(0.95);

}32%{opacity:1;-webkit-transform:scale(1);transform:scale(1);

}82.5%{opacity:1;-webkit-transform:scale(1);transform:scale(1);

}100%{opacity:0;

}}

测试数据

点击

html5 模仿语音聊天气泡,HTML5实现对话气泡动画方法相关推荐

html5 模仿语音聊天气泡,CSS3 仿微信聊天小气泡实例代码
今天给大家分享一个我刚做的项目中的一个小案例, 因为我们在做一个聊天的功能,之前的聊天页面UI很丑,我就不在这里展示给大家了. 现在就教大家怎么用css3制作一个和微信聊天界面一样的页面. 首先给大家 ...
语音聊天源码开发之常用动画效果的实现
效果展示下面是语音聊天源码开发中比较入门的豪华礼物动画--烟花. 一个复杂的礼物动画,首先是美术给出gif实现草图和素材,技术进行动画剖析和图片压缩,在语音聊天源码中加载图片和实现动画,其中要注意内 ...
ChatGPT宝藏插件丨装上之后，上网、语音聊天、一键分享对话……简直让你爽到起飞！
今天分享4个让你的 ChatGPT 功能更强大的浏览器插件,装上就能用,每一个都是精挑细选. 1. WebChatGPT 很多小伙伴在用 ChatGPT查阅信息时,发现它有一个致命的问题: ChatG ...
智能会议系统（33）---WebRTC学习之四：最简单的语音聊天
WebRTC学习之四:最简单的语音聊天 VoiceEngine中与最简单语音聊天相关的头文件有五个,如下表所示: 头文件包含的类说明 voe_base.h VoiceEngineObserver ...
HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果
教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...
气泡文字php,HTML5实现对话气泡点击动画
本篇文章给大家介绍一下使用HTML5实现对话气泡点击动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 需求还是要先把需求拿出来. 要求:对话气泡要有动画,动画总共4秒在 ...
html5对话框背景透明度,纯CSS3背景透明的Speech Bubbles对话气泡
这是一款使用纯CSS3制作的背景透明的Speech Bubbles对话气泡特效.该对话气泡使用两张透明的png图片来作为背景,通过简单的CSS代码来将它们组合为一个对话气泡效果. 使用方法 HTML结 ...
html5语音对讲,HTML5实时语音通话聊天，MP3压缩传输3KB每秒
来源 | https://www.jianshu.com/p/017a158b6b18 自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上传服务器这种操作支持非常 ...

html5 模仿语音聊天气泡,HTML5实现对话气泡动画方法

html5 模仿语音聊天气泡,HTML5实现对话气泡动画方法相关推荐

最新文章

热门文章