這篇文章跟大家介紹一下使用HTML5實現對話氣泡點擊動畫的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
需求
還是要先把需求拿出來。需求:
- 對話氣泡要有動畫,動畫總共4秒
- #在沒有點擊的時候,氣泡每隔8秒出現一次
- 在點擊的時候,如果動畫沒有播放完畢就不執行,如果動畫播放完畢,立即出現氣泡
#然後還是把完成圖拿出來,就是做成下面這個樣子:
想法
#實現
半透明氣泡製作
html結構
<p>闭上眼睛,用心祈祷,努力的人有回报</p>
.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></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); })
整體還是比較簡單的,所以這裡做一下記錄。
更多酷炫特效,推薦訪問:javascript特效大全!
以上是HTML5實現對話氣泡點擊動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!