<!DOCTYPE HTML>

 <html>

   <head>

     <meta charset="utf-8">

     <title>JS/CSS 在屏幕底部弹出消息</title>

     <style>

       #tip {

     visibility:hidden;

     width:400px;

     height:40px;

     border:1px solid black;

     text-align:center;

     padding:10px;

     background:black;

     color:white;

     border-radius:10px;

     line-height:40px;

     position:absolute;

     bottom:30px;

     left:30%;

 }

 #tip.show {

    visibility:visible;

   animation: fadein 3s, fadeout 0.5s 2.5s;

 }

 @keyframes fadein {

   from{opacity:0;bottom:0;}

   to{opacity:1;bottom:30px;}

 }

 @keyframes fadeout {

     from {bottom: 30px; opacity: 1;}

     to {bottom: 0; opacity: 0;}

 }

     </style>

   </head>

   <body>

     <button onclick="myFunction()">

       点击显示

     </button>

     <div id="tip">

       学好web，可以做精美的网站，和精美的游戏画面

     </div>

     <script>

       function myFunction() {

     var x = document.getElementById("tip")

     x.className = "show";

     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

 }

     </script>

   </body>

 </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. Spark技术内幕：Client，Master和Worker 通信源代码解析

    Spark的Cluster Manager能够有几种部署模式: Standlone Mesos YARN EC2 Local 在向集群提交计算任务后,系统的运算模型就是Driver Program定义 ...

  2. hosts 文件与 ipv6

    ipv6 的项目地址:ipv6-hosts 正如文档中所说,用于在大陆地区加快 Google.YouTube.Facebook.Wikipedia 等的访问:(twitter 不支持) 使用说明(wi ...

  3. win7防火墙里开启端口的图文教程

    转载于:http://www.cnblogs.com/vipsoft/archive/2012/05/02/2478847.html 开启端口:打开“控制面板”中的“Windows防火墙”,点击左侧的 ...

  4. swing导出html到excel

    swing导出html到excel 1  ShowCopDetal package com.product; import java.awt.BorderLayout; import java.awt ...

  5. try{futureGirl}catch(Exception){"Kill All Trouble"}——echarts样式

    首先先给未来女,解释一下题目吧.这是段代码,我再try{}括号里写了你,意思我会保护你.后面的catch(Exception)是捕捉你的所有麻烦,交给我解决. 今天收工较早,拖着疲惫是身躯回到宿舍,简 ...

  6. JSP页面的静态包含和动态包含的区别与联系

    JSP中有两种包含: 静态包含:<%@include file="被包含页面"%> 动态包含:<jsp:include page="被包含页面" ...

  7. U-BOOT概述及源码分析（一）

    嵌入式Linux系统从软件角度通常可以分为以下4个层次: 引导加载程序 | Linux内核 | 文件系统 | 用户应用程序 嵌入式Linux系统中典型分区结构: 正常启动过程中,Bootloader首 ...

  8. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  9. caioj 1063 动态规划入门（一维一边推1：美元和马克）

    这道题一开始我是这么想的 最后的答案肯定是某次的马克换回来的,但这个该怎么确定?? 实际上应该把范围缩小,只看最后一次和倒数第二次之间有什么联系. 可以发现,只有两种可能,最后一天换或者不换.换的话就 ...

  10. 前台ajax验证技术采用正则表达式

    var flag1,flag2,flag3,flag4,flag5,flag6=false; function val(obj) { var regBox = { /* regEmail : /^([ ...