本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章给大家介绍一下使用HTML5实现对话气泡点击动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。需求
还是要先把需求拿出来。 要求:
- 对话气泡要有动画,动画总共4秒
- 在没有点击的时候,气泡每隔8秒出现一次
- 在点击的时候,如果动画没有播放完毕就不执行,如果动画播放完毕,立即出现气泡
然后还是把完成图拿出来,就是做成下面这个样子:
思路
- 首先要制作气泡
- 其次使用css制作动画
- 添加计时器完成点击动画和计时动画
实现
半透明气泡制作
html结构
1 | <p class = "select-toast" id= "select-toast" >闭上眼睛,用心祈祷,努力的人有回报</p>
|
less(rem规则自己换算,也可以使用px)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .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;
&::before{
content: "" ;
width: 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动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .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;
}
}
|
添加计时器完成点击动画和计时动画
首先要确定一个点击的区域,这个区域一点击,就会触发气泡出现
1 2 | <!--点击<?)))><|出气泡-->
<div class = "fish-click" id= "fish-click" ></div>
|
封装功能函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | var toastText = [
"哈哈,早安" ,
"早上吃饭了吗?" ,
"好好学习,天天向上" ,
"闭上眼睛,用心祈祷,努力的人有回报" ,
"记得早点睡觉" ,
]
var fishAlert;
function textShow(aniTime,spaceTime){
clearInterval(fishAlert);
$( "#fish-click" ).off( "tap" );
var random = Math. floor (Math.random() * 5);
$( "#select-toast" ).html(toastText[random]).addClass( "toastAni" );
setTimeout( function (){
$( "#select-toast" ).removeClass( "toastAni" );
$( "#fish-click" ).off( "tap" ).on( "tap" , function (){
textShow(4000,8000);
})
fishAlert = setInterval( function (){
var random = Math. floor (Math.random() * 5);
$( "#select-toast" ).html(toastText[random]).addClass( "toastAni" );
setTimeout( function (){
$( "#select-toast" ).removeClass( "toastAni" );
},aniTime)
},spaceTime);
},aniTime);
}
|
函数调用
1 2 3 4 | $(document).ready( function (){
textShow(4000,8000);
})
|
整体还是比较简单的,所以这里做一下记录。
更多炫酷特效,推荐访问:javascript特效大全!
以上就是HTML5实现对话气泡点击动画的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5和html4的区别有哪些
HTML5页面调起app功能的方法试验
HTML5实践-在非响应式设计中如何使用viewport meta标签的方法介绍
HTML5 main标签是什么意思?HTML5 main标签作用的详细介绍
详细介绍websocket api HTML5规范翻译
HTML5 canvas实现绘制一个像素宽的细线
HTML5怎么实现拖拽
h5移动端各种各样的列表的制作方法(二)
HTML5实现一个简单的在线画板
HTML5中创建和返回新的文本轨道的方法
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5实现对话气泡点击动画