需求：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. Vue总结(一)

    vue总结 构建用户界面的渐进式框架 渐进式:用到什么功能即可使用转么的框架子模块. 两个核心点 向应的数据绑定 当时图发生改变->自动跟新视图,利用Object.defindProperty中 ...

  2. php https链接

    1.安装soap扩展 2.安装openssL 3.代码执行 function  issure($sn){//通过soap链接接口  进行确认是否是正确的sn码    try{        $clie ...

  3. 高速改动android系统默认日期方法

    高速改动android系统默认日期方法 在android系统的设备上,都有一个默认的開始日期,看过非常多设备,有些设备在没有联网的时候没有同步到系统时间的时候,竟然默认的还是1970年的日期.也见过有 ...

  4. OpenCASCADE Job - 武汉中南

    中南设计集团(武汉)工程技术研究院有限公司是中南工程咨询设计集团有限公司(以下简称“中南设计集团”)打造的工程技术研发和科研创新平台,为中南设计集团旗下全资子公司,于2018年2月成立.公司业务范围涵 ...

  5. 73,QT指针数组实战(指针数组与数组指针)

    //指针数组,每一个指针都是一个MainWindow // MainWindow *w[3][4]; // for(int i=0;i<3;i++) // { // for(int j=0;j& ...

  6. 5.cocos2d锚点

    创建一个层T1LayerAnchorPoint AppDelegate.cpp bool AppDelegate::applicationDidFinishLaunching() { // initi ...

  7. How to anti-Obfuscated code

    Author:jin can zhu from China Source:http://blog.csdn.net/clever101 Now many software makers have us ...

  8. Android 实现QQ、微信、新浪微博和百度第三方登录

    前言: 对于大多数的APP都有第三方登录这个功能,自己也做过几次,最近又有一个新项目用到了第三方登录,所以特意总结了一下关于第三方登录的实现,并拿出来与大家一同分享: 各大开放平台注册账户获取AppK ...

  9. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  10. LAMP环境搭建成功后的部分相关配置

    LAMP环境搭建成功后,通常还需要做一些其他配置来完善,本文主要记录常用到的一些设置. 所有的配置是基于Ubuntu 16.04 + Apache2.4 + Mysql5.7 + Php7.0,对于其 ...