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

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>css实现告警提示动画</title>

            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

        <style>

            .container {

                width: 200px;

                height: 200px;

                border:1px  solid  #CCCCCC;

                position: absolute;

                left: 40%;

                top: 40%;

            }

            .delete{

            text-align: right;

            margin-right: 4px;

            }

            .type {

                text-align: center;

            }

            .ico {

             position: absolute;

                left: 20%;

                top: 29%;

                width: 120px;

                height: 120px;

                background: url(img/211.png) no-repeat center;

                background-size: 100%;

            }

            /*动画*/

            .ico {

                -webkit-animation: Tada 1s 2s both infinite;

                -moz-animation: Tada 1s 2s both infinite;

                -ms-animation: Tada 1s 2s both infinite;

                animation: Tada 1s 2s both infinite;

            }

            /*浏览器兼容性部分略过*/

            @keyframes Tada {

                0% {

                    transform: scale(1);

                    transform: scale(1)

                }

                10%,

                20% {

                    transform: scale(0.9) rotate(-3deg);

                    transform: scale(0.9) rotate(-3deg)

                }

                30%,

                50%,

                70%,

                90% {

                    transform: scale(1.1) rotate(3deg);

                    transform: scale(1.1) rotate(3deg)

                }

                40%,

                60%,

                80% {

                    transform: scale(1.1) rotate(-3deg);

                    transform: scale(1.1) rotate(-3deg)

                }

                100% {

                    transform: scale(1) rotate(0);

                    transform: scale(1) rotate(0)

                }

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div  class="delete">

                <img  src="img/delete.png">

            </div>

            <div class="type">健康报警  

            </div>

            <div class="ico"></div>

        </div>

    </body>

<script>

       $(".delete").on("click",function(){

       $('.container').hide();

 });

</script>

</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. SQL函数-str()

    1 str()函数用于将数值类型数据转换未字符类型. 2 str()函数语法 select str(数字类型的表达式[,表达式总长度][,小数点后面的位数]) 表达式总长度和小数点后面的位数为可选择参 ...

  2. 963B：Destruction of a Tree

    You are given a tree (a graph with n vertices and n - 1 edges in which it's possible to reach any ve ...

  3. 概率编程:《贝叶斯方法概率编程与贝叶斯推断》中文PDF+英文PDF+代码

    贝叶斯推理的方法非常自然和极其强大.然而,大多数图书讨论贝叶斯推理,依赖于非常复杂的数学分析和人工的例子,使没有强大数学背景的人无法接触.<贝叶斯方法概率编程与贝叶斯推断>从编程.计算的角 ...

  4. JNI之——Can&#39;t load IA 32-bit .dll on a AMD 64-bit platform错误的解决

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46605003 在JNI开发中,Java程序须要调用操作系统动态链接库时,报错信息: ...

  5. WIN10 10招

    还有不到两个月的时间,7 月 29 日 Windows 10 就将正式公布,在此之前已经有不少的用户已经使用上了 Windows 10 的预览版.对于那些苦等 Windows 10 的用户来说,幸福非 ...

  6. C#运算符小例子

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. CHROME开发者工具的小技巧

    我猜不能转载,但是必须分享. http://coolshell.cn/articles/17634.html

  8. 「HAOI2016」字符合并

    「HAOI2016」字符合并 题意: ​ 有一个长度为\(n\)的\(01\)串,你可以每次将相邻的\(k\)个字符合并,得到一个新的字符并获得一定分数.得到的新字符和分数由这\(k\)个字符确定.你 ...

  9. 【CS Round #39 (Div. 2 only) C】Reconstruct Sum

    [Link]:https://csacademy.com/contest/round-39/task/reconstruct-sum/ [Description] 给你一个数字S; 让你找有多少对A, ...

  10. 【CS Round #39 (Div. 2 only) A】Removed Pages

    [Link]: [Description] [Solution] 每读入一个x; 把a[(x-1)/2]置为1即可; 统计1的个数 [NumberOf WA] [Reviw] [Code] /* */ ...