怎么用HTML5做对话气泡动画的效果
导读：这篇文章给大家分享的是“怎么用HTML5做对话气泡动画的效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“怎么用HTML5做对话气泡动画的效果”吧。...
这篇文章给大家分享的是“怎么用HTML5做对话气泡动画的效果”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“怎么用HTML5做对话气泡动画的效果”吧。
本篇文章给大家介绍一下使用HTML5实现对话气泡点击动画的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
需求
还是要先把需求拿出来。 要求：
- 对话气泡要有动画，动画总共4秒
- 在没有点击的时候，气泡每隔8秒出现一次
- 在点击的时候，如果动画没有播放完毕就不执行，如果动画播放完毕，立即出现气泡
然后还是把完成图拿出来，就是做成下面这个样子：
思路
- 首先要制作气泡
- 其次使用css制作动画
- 添加计时器完成点击动画和计时动画
实现
半透明气泡制作
html结构
p class="select-toast" id="select-toast">
闭上眼睛，用心祈祷，努力的人有回报/p>
less(rem规则自己换算，也可以使用px)
.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;
}
}
对话框css动画
.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;
}
}
添加计时器完成点击动画和计时动画
首先要确定一个点击的区域，这个区域一点击，就会触发气泡出现
!--点击・)))>
|出气泡-->
div class="fish-click" id="fish-click">
/div>
封装功能函数
//随机出现的话术数组
var toastText = [
"哈哈，早安",
"早上吃饭了吗？",
"好好学习，天天向上",
"闭上眼睛，用心祈祷，努力的人有回报",
"记得早点睡觉",
]
//计时器变量
var fishAlert;
//弹出功能函数
function textShow(aniTime,spaceTime){
//清空计时器
clearInterval(fishAlert);
//解绑事件
$("#fish-click").off("tap");
//设置显示的文本，随机生成0-4的整数
var random = Math.floor(Math.random() * 5);
//展示随机生成的文本
$("#select-toast").html(toastText[random]).addClass("toastAni");
//4000秒后去掉动画
setTimeout(function(){
//去掉动画样式
$("#select-toast").removeClass("toastAni");
//重新绑定事件
$("#fish-click").off("tap").on("tap",function(){
textShow(4000,8000);
}
)
//添加8秒计时器
fishAlert = setInterval(function(){
//随机生成0-4的整数
var random = Math.floor(Math.random() * 5);
//添加动画
$("#select-toast").html(toastText[random]).addClass("toastAni");
setTimeout(function(){
//动画结束后移除动画
$("#select-toast").removeClass("toastAni");
}
,aniTime)
}
,spaceTime);
}
,aniTime);
}
函数调用
$(document).ready(function(){
//动画时间4000ms，间隔时间8000ms
textShow(4000,8000);
}
)整体还是比较简单的，所以这里做一下记录。
通过以上内容的阐述，相信大家对“怎么用HTML5做对话气泡动画的效果”已经有了进一步的了解，更多相关的问题，欢迎关注网络或到官网咨询客服。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 怎么用HTML5做对话气泡动画的效果
本文地址： https://pptw.com/jishu/654752.html