您现在的位置是:群英 > 开发技术 > web开发
怎么用HTML5做对话气泡动画的效果
Admin发表于 2022-05-14 11:48:531101 次浏览
这篇文章给大家分享的是“怎么用HTML5做对话气泡动画的效果”,文中的讲解内容简单清晰,对大家学习和理解有一定的参考价值和帮助,有这方面学习需要的朋友,接下来就跟随小编一起学习一下“怎么用HTML5做对话气泡动画的效果”吧。

本篇文章给大家介绍一下使用HTML5实现对话气泡点击动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

需求

还是要先把需求拿出来。 要求:

  1. 对话气泡要有动画,动画总共4秒
  2. 在没有点击的时候,气泡每隔8秒出现一次
  3. 在点击的时候,如果动画没有播放完毕就不执行,如果动画播放完毕,立即出现气泡

然后还是把完成图拿出来,就是做成下面这个样子:

思路

  1. 首先要制作气泡
  2. 其次使用css制作动画
  3. 添加计时器完成点击动画和计时动画

实现

半透明气泡制作

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做对话气泡动画的效果”已经有了进一步的了解,更多相关的问题,欢迎关注群英网络或到群英官网咨询客服。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: 对话气泡
相关信息推荐
2022-06-20 16:58:25 
摘要:bootstrap关闭tab的方法:首先引入jquery;然后在相应的页面中引用“bootstrap-closable-tab”插件来实现可关闭的tab标签页效果即可。
2022-08-13 17:50:07 
摘要:安卓使用时间长了有卡顿的原因主要有四种:1、系统问题,安卓是开源的,使用后会产生较多系统碎片,长时间不整合就会卡;2、配置问题,每部手机硬件出厂后基本固定,而手机软件会不断升级,几年后硬件就可能无法跟
2022-07-07 17:30:37 
摘要:sync.Once使用起来很简单, 下面是一个简单的使用案例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部