1.  <!DOCTYPE HTML>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <title>JS/CSS 在屏幕底部弹出消息</title>
  6.      <style>
  7.        #tip {
  8.      visibility:hidden;
  9.      width:400px;
  10.      height:40px;
  11.      border:1px solid black;
  12.      text-align:center;
  13.      padding:10px;
  14.      background:black;
  15.      color:white;
  16.      border-radius:10px;
  17.      line-height:40px;
  18.      position:absolute;
  19.      bottom:30px;
  20.      left:30%;
  21.  }
  22.  
  23.  #tip.show {
  24.     visibility:visible;
  25.    animation: fadein 3s, fadeout 0.5s 2.5s;
  26.  }
  27.  
  28.  @keyframes fadein {
  29.    from{opacity:0;bottom:0;}
  30.    to{opacity:1;bottom:30px;}
  31.  }
  32.  
  33.  @keyframes fadeout {
  34.      from {bottom: 30px; opacity: 1;}
  35.      to {bottom: 0; opacity: 0;}
  36.  }
  37.      </style>
  38.    </head>
  39.    <body>
  40.      <button onclick="myFunction()">
  41.        点击显示
  42.      </button>
  43.      <div id="tip">
  44.        学好web，可以做精美的网站，和精美的游戏画面
  45.      </div>
  46.      <script>
  47.        function myFunction() {
  48.      var x = document.getElementById("tip")
  49.      x.className = "show";
  50.      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
  51.  }
  52.      </script>
  53.    </body>
  54.  </html>

JS/CSS 在屏幕底部弹出消息的更多相关文章

  1. jquery简易版xwPop.js弹出消息对话框插件

    xwPop.js弹出消息对话框插件是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹出对话框,它提供各种参数和方法,功能非常强大.目前已经在项目中有应用到xwpop开发 ...

  2. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  3. js+jquery手写弹出提示框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  5. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  6. .net 弹出消息框后，页面样式变乱

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 Resp ...

  7. css模仿微信弹出菜单

      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

  8. 弹出消息对话框ScriptManager

    //直接调用WebMessageBox方法 #region 弹出消息对话框 /// <summary> /// 弹出消息对话框 /// </summary> /// <p ...

  9. Android屏幕底部弹出DialogFragment（3）

     Android屏幕底部弹出DialogFragment(3) 附录文章1,2的DialogFragment是常规的DialogFragment,但是现在的一些Android开发中,往往需要从底部 ...

随机推荐

  1. scikit-learn：3.2. Grid Search: Searching for estimator parameters

    參考:http://scikit-learn.org/stable/modules/grid_search.html GridSearchCV通过(蛮力)搜索參数空间(參数的全部可能组合).寻找最好的 ...

  2. html2canvas截取页面

    1.下载html2canvas.js 2.引入 3.修改html2canvas支持远程图片处理 function ImageContainer(src, cors) { this.src = src; ...

  3. linux关于用户密码家目录总结

    创建用户及其家目录useradd -d /home/tomcat -m tomcat接着修改密码passwd tomcat usermod -s /sbin/nologin + 用户名 禁止登录ssh ...

  4. quartz 添加监听器listener

    全局注册,所有Job都会起作用 JobCountListener listener = new JobCountListener(); sched.getListenerManager().addJo ...

  5. Gym - 100203I I WIN 网络流

    Gym - 100203I  I WIN 题意:一个n*m的矩阵包含W,I,N三种字符,问相邻的字符最多能组成不重叠的WIN. 思路:比赛的时候没有发现是网络流,,居然一度以为是二分图匹配,,写了一下 ...

  6. 解决Esxi5下安装Windows 8的问题

    在VM8工作站版下安装windows 8没有问题,可是到了Esxi5下,非得安装补丁不可.补丁下载地址: http://kb.vmware.com/selfservice/microsites/sea ...

  7. VBA 字符串操作（基础篇）

    转自:http://blog.csdn.net/jyh_jack/article/details/2315345 mid(字符串,从第几个开始,长度) 在[字符串]中[从第几个开始]取出[长度个字符串 ...

  8. 【C/C++】链表的理解与使用

    转载自:http://blog.csdn.NET/xubin341719/article/details/7091583/ 最近不是太忙,整理些东西,工作也许用得到. 1,为什么要用到链表 数组作为存 ...

  9. Mysql学习总结（19）——Mysql无法创建外键的原因

    在MySQL中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  10. CodeForcesGym 100502K Train Passengers

    Train Passengers Time Limit: 1000ms Memory Limit: 524288KB This problem will be judged on CodeForces ...