需求：css实现简单的告警提示动画效果，当接收到实时信息的时候，页面弹出告警信息的动画效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>css实现告警提示动画</title>
  6.             <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
  8.         <style>
  9.             .container {
  10.                 width: 200px;
  11.                 height: 200px;
  12.                 border:1px  solid  #CCCCCC;
  13.                 position: absolute;
  14.                 left: 40%;
  15.                 top: 40%;
  16.             }
  17.             .delete{
  18.             text-align: right;
  19.             margin-right: 4px;
  21.             }
  22.             .type {
  23.                 text-align: center;
  25.             }
  27.             .ico {
  28.              position: absolute;
  29.                 left: 20%;
  30.                 top: 29%;
  31.                 width: 120px;
  32.                 height: 120px;
  33.                 background: url(img/211.png) no-repeat center;
  34.                 background-size: 100%;
  35.             }
  36.             /*动画*/
  38.             .ico {
  39.                 -webkit-animation: Tada 1s 2s both infinite;
  40.                 -moz-animation: Tada 1s 2s both infinite;
  41.                 -ms-animation: Tada 1s 2s both infinite;
  42.                 animation: Tada 1s 2s both infinite;
  43.             }
  44.             /*浏览器兼容性部分略过*/
  46.             @keyframes Tada {
  47.                 0% {
  48.                     transform: scale(1);
  49.                     transform: scale(1)
  50.                 }
  51.                 10%,
  52.                 20% {
  53.                     transform: scale(0.9) rotate(-3deg);
  54.                     transform: scale(0.9) rotate(-3deg)
  55.                 }
  56.                 30%,
  57.                 50%,
  58.                 70%,
  59.                 90% {
  60.                     transform: scale(1.1) rotate(3deg);
  61.                     transform: scale(1.1) rotate(3deg)
  62.                 }
  63.                 40%,
  64.                 60%,
  65.                 80% {
  66.                     transform: scale(1.1) rotate(-3deg);
  67.                     transform: scale(1.1) rotate(-3deg)
  68.                 }
  69.                 100% {
  70.                     transform: scale(1) rotate(0);
  71.                     transform: scale(1) rotate(0)
  72.                 }
  73.             }
  74.         </style>
  75.     </head>
  77.     <body>
  78.         <div class="container">
  79.             <div  class="delete">
  80.                 <img  src="img/delete.png">
  81.             </div>
  82.             <div class="type">健康报警  
  84.             </div>
  85.             <div class="ico"></div>
  86.         </div>
  87.     </body>
  89. <script>
  90.        $(".delete").on("click",function(){
  91.        $('.container').hide();
  92.  });
  93. </script>
  95. </html>

效果如下：


注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

css实现简单的告警提示动画效果的更多相关文章

  1. 用HTML和CSS实现WWDC 2015上的动画效果

    用HTML和CSS实现WWDC 2015上的动画效果 动画效果WWDC 2015   原文:https://cssanimation.rocks/wwdc15/ 译者:周晓楷(@Helkyle) 每年 ...

  2. 简单的UIButton按钮动画效果iOS源码

    这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 使用时把ButtonA ...

  3. Mono For Android中简单实现按钮的动画效果

    Android中动画的分Tween Animation和Frame Animation,本节主要讲Tween Animation的实现. 一般是通过XML文件来定义动画的,具体如下: 1.在项目res ...

  4. 原生html，css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  5. css 实现水波纹，波浪动画效果

    <div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...

  6. CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

    CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...

  7. CSS3 transition实现超酷图片墙动画效果

    一.前面的感慨以前也陆陆续续试过CSS3的一些特性,文字投影,多边框等.但都是试试而已,知道有这么回事.今天,见到了一个新玩意,transition,认认真真的试了一下,经过,我懵了,我呆了,我傻了, ...

  8. css3中outline切换动画效果

    今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> < ...

  9. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

随机推荐

  1. canvas中遇到的理解问题

    1.lineDashOffset ctx.lineDashOffset = number 描述: setLineDash 用于设置开始绘制虚线的偏移量. 数字的正负表示左右偏移. 2.createLi ...

  2. Ubuntu Bonding(16.04网卡绑定)

    UbuntuBonding(网卡绑定) 绑定,也称为端口聚合或链路聚合,意味着将多个网络接口(NIC)组合到单个链路,从而提供高可用性,负载平衡,最大吞吐量或这些组合.注意bonding只能提供链路监 ...

  3. Zabbix钉钉小机器人报警

    1.下载钉钉所需要的脚本golang-zabbix-robot-64,浏览器访问https://www.appgao.com/files/192.html: 图一    脚本下载 2.将脚本路径添加到 ...

  4. Swift学习笔记(1)--基本语法

    1.分号; 1>Swift不要求每个语句后面跟一个分号作为语句结束的标识,如果加上也可以,看个人喜好 2>在一行中写了两句执行语句,需要用分号隔开,比如 let x = 0; printl ...

  5. request中文乱码解决

    String str = new String(request.getParameter("参数名").getBytes("iso-8859-1"), &quo ...

  6. 使用Microsoft excel 2007 进行数据分析---环境配置

    使用Microsoft excel 2007 进行数据分析---环境配置 使用前须要安装SQL server 2008 data mining Add-ins for Microsoft excel  ...

  7. ChinaVis2015 第一天会议

    第二届  ChinaVis 2015 在天津举行,非常幸运发现者个会议,并在导师的带领下參与本次会议. 主要要是以可视化与可视分析为背景进行讲座,以马匡六为Speaker.袁晓如,张加万等致辞开幕式. ...

  8. 位运算（&amp;、|、^）与逻辑运算（&amp;&amp;、 ||）差别

    刚无意在一篇文章中看到了位运算(&.|)和逻辑运算(&&.||)的介绍.想起了自己薄弱的基础知识.于是百度了几把总结了下. 首先从概念上区分下,位运算是将运算符两边的数字换算成 ...

  9. QT就是别人好心帮你做一些枯燥，并且很重复的代码编写工作，让你更好的把精力投入到你界面的逻辑和功能的实现的功能库（否则写了上万行代码了，才写出个BUG一大堆的毛坯）

    好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么 编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...

  10. vue绑定内联样式

    v-bind:style 的对象语法十分直观--看着非常像 CSS ,其实它是一个 JavaScript 对象. CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case) ...