JS怎样做弹窗消息动画的效果?
Admin 2021-10-14 群英技术资讯 555 次浏览
这篇文章给大家分享的是有关JS怎样做弹窗消息动画的效果的内容,小编觉得挺实用的,因此分享给大家做个参考,实现效果及代码如下,接下来一起跟随小编看看吧。
效果图
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画消息弹窗</title> </head> <style> .message { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; color: rgba(0, 0, 0, 0.85); font-size: 14px; font-variant: tabular-nums; line-height: 1.5715; list-style: none; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; position: fixed; top: 8px; left: 0; z-index: 1010; width: 100%; pointer-events: none; } .message-notice { padding: 8px; text-align: center; -webkit-animation-name: MessageMoveOut; animation-name: MessageMoveOut; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .message-content { color: #52c41a; display: inline-block; padding: 10px 16px; background: #fff; border-radius: 2px; -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); pointer-events: all; } @-webkit-keyframes MessageMoveOut { 0% { max-height: 0; padding: 0; opacity: 0; } 100% { max-height: 150px; padding: 8px; opacity: 1; } } @keyframes MessageMoveOut { 0% { max-height: 0; padding: 0; opacity: 0; } 100% { max-height: 150px; padding: 8px; opacity: 1; } } </style> <body style="text-align: center;"> <div style="margin: 100px 500px;text-align: right;"> <a href="#" rel="external nofollow" onclick="handleMessage()">点击弹窗</a> </div> <div class="message" id="message"></div> <script> const msg = "我是弹框消息"; // 弹窗消息 function handleMessage(message = msg) { const parentDiv = document.createElement("div"); const div = document.createElement("div"); div.className = "message-content"; div.innerHTML = message; parentDiv.appendChild(div); parentDiv.className = "message-notice"; document.getElementById("message").appendChild(parentDiv); setTimeout(() => { parentDiv.remove(); }, 2000); } </script> </body> </html>
关于JS实现弹窗消息动画的效果的内容就介绍到这,本文代码具有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多js弹窗消息的实现,大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了Nest.js 授权验证的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,小编通过实际的案例向大家展示了操作过程,简单易懂,有需要的朋友可以参考了解看看,那么接下来就跟随小编的思路来往下学习吧,希望对大家学习或工作能有帮助。
TypeScript中泛型是什么意思?怎样使用?对新手来说,可能对泛型和泛型的用法不是很了解,对此这篇文章给大家分享TypeScript中泛型的内容。小编觉得挺实用的,因此给大家做个参考,感兴趣的朋友接着往下看。
这篇文章主要为大家详细介绍了vue3实现CSS无限无缝滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了jquery实现呼吸轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008