需求：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. Yeslab 华为安全HCIE七门之-防火墙基础（12篇）

    Yeslab 华为安全HCIE七门之-防火墙基础(12篇) Yeslab 全套华为安全HCIE七门之第二门防火墙基础(12篇),第一门课论坛很早就有了,可自行下载,后面的陆续分享给大家. 华为安全HC ...

  2. SelectSort

    /**简单选择排序*/ #include<cstdio> #include<algorithm> using namespace std; int a[]={5,2,1,3,4 ...

  3. 怎样借助log4j把日志写入数据库中

            log4j是一个优秀的开源日志记录项目.我们不仅能够对输出的日志的格式自定义,还能够自定义日志输出的目的地,比方:屏幕.文本文件,数据 库,甚至能通过socket输出.本节使用MySQ ...

  4. sdut 2805（最小生成树）

    大家快来A水题 Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 (1<= N <=2000)(1<= M <= N*(N-1)/2 ...

  5. 算法题：给你一个自然数N，求[6, N]之内的全部素数中， 两两之和为偶数的那些偶数。

    /* 算法题:给你一个自然数N,求[6, N]之内的全部素数中. 两两之和为偶数的那些偶数. */ #include <iostream> using namespace std; voi ...

  6. iOS-APP-Icon 图标启动图及名字的设置

    本文讲下appIcon图标.启动图及名字的设置 icon for iOS 图标大小参照苹果官网:https://developer.apple.com/library/ios/qa/qa1686/_i ...

  7. sessionStorage的使用方法

    本篇是关于sessionStorage的使用方法的介绍,简单几行代码,实现sessionStorage,请大家查阅 (1)在需要设置sessionStorage的页面写如下代码可以存入sessionS ...

  8. LuoguP2765 魔术球问题(最大流)

    题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...

  9. nice---进程优先级

    在当前程序运行优先级基础之上调整指定值得到新的程序运行优先级,用新的程序运行优先级运行命令行"command [arguments...]".优先级的范围为-20 - 19 等40 ...

  10. spring boot 热启动

    spring boot热启动有两种方式 1. 以Maven插件的形式去加载,所以启动时使用通过Maven命令mvn spring-boot:run启动,而通过Application.run方式启动的会 ...