需求：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. Bootstrap概览

    摘选自runnoob.com,bootstrap4所有api概览: 一.安装: 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 ...

  2. Vert.x，一个异步、可伸缩、并发应用框架引发的思考

    2012年听说过Vert.x这个框架之后,去年大致了解了下,最近开始进一步熟悉这个框架. Vert.x是一个用于下一代异步.可伸缩.并发应用的框架,旨在为JVM提供一个Node.js的替代方案.开发者 ...

  3. 在idea 中使用try catch

    ctrl+alt + t 选中代码,按快捷键可直接try catch 此段代码

  4. Add Webhooks to Your API the Right Way

    Add Webhooks to Your API the Right Way Adam DuVander / December 15, 2016 In the last 10 years, APIs ...

  5. TRIZ系列-创新原理-31-多孔材料原理

    多孔材料原理的详细描写叙述例如以下:1)让物体变成多孔的.或者使用辅助的多孔部件(如插入,覆盖):2)假设一个物体已经是多孔了,那么事先往里面填充某种物质:这个原理提出的原因是,一般机械系统通常都是由 ...

  6. Unity3D:粒子系统Particle System

    1. GameObject → Create Other  →  Particle System. 2. 选中 Particle System,可看到下列屬性: 3.Particle System: ...

  7. QQ 5.0的一些特效学习 一

    虽然QQ5.0已经过去很久了,但是有些特效还是值得学习的 效果: 源码点我 导入的jar包, 一个是高版本的support.v4包,需要这个v4包中有ViewDragHelper. 我这里使用的是su ...

  8. JumpServer 堡垒机 指南

    堡垒机介绍 在一个特定网络环境下,为了保障网络和数据不受外界入侵和破坏,而运用各种技术手段实时收集和监控网络环境中每一个组成部分的系统状态.安全事件.网络活动,以便集中报警.及时处理及审计定责.    ...

  9. hadoop安装报错

    1.Hadoop安装完后,启动时报Error: JAVA_HOME is not set and could not be found. 解决办法: 修改/etc/hadoop/hadoop-env. ...

  10. deep-in-es6(七)

    Symbols对象 JavaScript的第七种原始类型 以前的数据类型: Undefined 未定义 Null 空值 Boolean 布尔类型 Number 数字类型 String 字符串类型 Ob ...