需求：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. PHP获取随机字符串的两种方法

    <?php /** * 随机返回字符串 * @param number 返回字符串长度 * @param string 从哪些字符串中随机返回,已设置默认字符串,可空 * @return str ...

  2. SYSU 6356 Dispatching

    Dispatching Time Limit: 3000ms Memory Limit: 262144KB This problem will be judged on SYSU. Original ...

  3. C语言的有符号与无符号,二进制整数的扩展与截断

    C语言的有符号与无符号,二进制整数的扩展与截断 前一节说了整数的表示方式,,也就是无符号编码与补码编码.这一届说一下二进制整数的扩展与截断,这部分内容与C语言挂钩.so,我们先看下面C语言的有符号和无 ...

  4. JavaFX 一 出生新手村(阅读小规则)

    我就不讲IDE怎么装的,网上有的是,我仅仅是说说我学习过程中遇到的,该注意的东西 1.JavaFX刚開始出是基于脚本script开发的语言,所以网上会有流传比較多关于script的JavaFX,对于被 ...

  5. SQL Server performance for alter table alter column change data type

    最近在搞一个升级脚本,发现有一张业务表中的某些字段长度需要调整,直接使用alter table alter column进行修改发现修改一列要用十几分钟!!!两三个列那用时简直不能容忍啊!google ...

  6. Exercise : Self-Taught Learning

    First, you will train your sparse autoencoder on an "unlabeled" training dataset of handwr ...

  7. java(数组及常用简单算法 )

    数组 数组:数组是存储同一种数据类型数据的集合容器. 数组的定义格式: 数据类型[]  变量名  =  new  数据类型[长度]; 数组的好处:对分配到数组对象中每一个数据都分配一个编号(索引值.角 ...

  8. userdel---删除用户及相关文件

    userdel命令   userdel命令用于删除给定的用户,以及与用户相关的文件.若不加选项,则仅删除用户帐号,而不删除相关文件. 语法 userdel(选项)(参数) 选项 -f:强制删除用户,即 ...

  9. logback 生成日志

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <appender ...

  10. 兔子--ps中的基本工具总结（ps cs5）

    矩形选框工具 椭圆选框工具 单行选框工具 单列选框工具 移动工具 套索工具柜 多边形套索工具 磁性套索工具 魔棒工具 高速选择工具 裁剪工具 切片工具 切片选择工具 吸管工具 颜色取样器工具 标尺工具 ...