css实现简单的告警提示动画效果

需求: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>

效果如下:

图片.png

90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。 原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

经典黑色--网站管理界面

http://www.cnblogs.com/jikey/p/3631292.html

2581
来自专栏分布式系统和大数据处理

ppk谈JavaScript

这本书买得比较早,断断续续读了几次。这次花了一周时间重新读了一遍。总得来说,这本书中的部分理念,不说完全过时,但在现在的技术环境下也很难实现了。例如书中提到的“...

1212
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

1425
来自专栏葡萄城控件技术团队

不用Visual Studio,5分钟轻松实现一张报表

常规的报表设计,如RDLC、水晶报表等,需要安装Visual Studio,通过VS提供的报表设计界面来设计报表,通过VS设计报表对.NET开发者而言非常方便,...

3295
来自专栏每日一篇技术文章

SceneKit - 打造全景+VR 播放框架

1.全景模式和VR模式 2.支持滑动切换视角 3.支持捏合放大缩小 4.支持重力感应 5.包含头控功能(上一曲,下一曲,暂停和播放,以及音量键) 6....

2543
来自专栏李成熙heyli

腾讯新闻React同构直出优化实践

按照经验来说,直出,能够减少20% - 50%不等的首屏时间,因此尽管增加一定维护成本,前端们还是前赴后继地在搞直出。

6555
来自专栏EAWorld

为什么使用React作为云平台的前端框架(PPT)

大家好,很高兴可以和大家分享“为什么使用React作为我们的前端框架”。 首先,我们来看一下普元云的总体架构图。 ? 从图中可以看到,在我们普元云平台中,我们最...

4394
来自专栏编程微刊

vue2.0移动端自定义性别选择提示框

这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。

1551
来自专栏ytkah

两周“学会”bootstrap搭建一个移动站点

  一直想着用bootstrap搭建网站,它的自适应、元素封装完善、现成的Glyphicons字体图标,省去很多的css、js、ui的工作,可以快速搭建一个客户...

3006
来自专栏IMWeb前端团队

深入浅出React(一):React的设计哲学 - 简单之美

本文作者:IMWeb 刘起 原文出处:IMWeb社区 未经同意,禁止转载 编者按:自2013年Facebook发布以来,React吸引了越来越多的开发...

2165

扫码关注云+社区

领取腾讯云代金券