原生js实现弹窗消息动画

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js实现弹窗消息动画

    本文实例为大家分享了js实现弹窗消息的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

  • 原生js仿jquery animate动画效果

    原生js仿jquery animate动画效果

    jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

  • 原生js实现页面滚动动画

    原生js实现页面滚动动画

    本文实例为大家分享了js实现页面滚动动画的具体代码,供大家参考,具体内容如下 需求: 1 页面滚动到对应板块,左侧对应的索引高亮2 点击左侧的索引,滚动到对应的板块 代码如下,直接拷贝到html文件就可以使用 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport"

  • 原生JS检测CSS3动画是否结束的方法详解

    原生JS检测CSS3动画是否结束的方法详解

    本文实例讲述了原生JS检测CSS3动画是否结束的方法.分享给大家供大家参考,具体如下: 不知道大家在做网页的时候有没有碰到这种情况:当你使用CSS3的动画属性时,想要在动画结束后添加一系列操作,但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了. 针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义: 代码如下: <!DOCTYPE html> <ht

  • 如何用原生js写一个弹窗消息提醒插件

    1.分析 当消息被触发的时候,会有一个自上而下的淡入过程. 在持续了一段时间后会自动的消失,或者是需要用户来手动的点击关闭按钮. 在消息消失的时候,会有一个自下而上的淡出过程. 消息是可以叠加弹出的,最新的消息会排在消息列表的最后面. 当前面的消息消失后,后面的消息会有一个向上滑动效果. 然后消息本身是有三部分组成 消息图标,用来区分不同类型的消息. 消息文本. 关闭按钮,并不是所有消息都需要关闭按钮. 2. 实现样式 那么,不管我们是用原生js还是vue,首先呢,我们都需要把这个消息的基本样式

  • 原生JS实现首页进度加载动画

    js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

  • 九种原生js动画效果

    在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • 原生js实现打字动画游戏

    这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • 利用原生JS与jQuery实现数字线性变化的动画

    前言 大家应该都有所体会,在一些数据展示的专题页里,有时候希望数字能动态从某一个数变化到另一个数,以此来吸引用户眼球,突出数据.于是有了下文. 在这里,我用了两种方式:一种是原生的JavaScript,另一种是jQuery插件. 数字线性变化的原理很简单,就是让数字增量变化,并循环动画. 原生JS版 首先获取DOM元素.为了兼容到IE6,兼容性方法如下: var domUtil = { // 获取DOM元素 get: function(query) { var _this = this; if(

随机推荐