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>

效果如下：

注：

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

关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

转载于:https://www.cnblogs.com/ting6/p/9726101.html

css实现简单的告警提示动画效果相关推荐

html中flash的简单动画效果,css实现快速炫酷抖动动画效果
1.Animate.css简介 Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库.非常适合强调,首页,滑块和引导注意的提示.它是一个来自国外的 CSS3 动画库,它预设了抖动 ...
JS JQuery实现简单的鼠标移动动画效果
JS JQuery实现简单的鼠标移动动画效果说明: 之前看到过很多别人写的的网页鼠标特效,感觉很炫酷. 但是那些都涉及到复杂的数学知识和逻辑,我没有能力写出类似的鼠标效果,于是我仿照一般的显示鼠标移 ...
CSS实现内容旋转向下移动的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容旋转向下移动的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文 ...
手机端自定义简单的下拉动画效果选择框解决过渡失效
手机端自定义简单的下拉动画效果选择框解决过渡失效 <template> // 弹出框触发并显示选择结果<view class="header_top_sel" ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
CSS实现内容颜色渐变的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容颜色渐变的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文档, ...
css实现加载中loading动画效果
1 效果 2 实现原理原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
简单的UIButton按钮动画效果iOS源码
这个是简单的UIButton按钮动画效果案例,源码,简单的UIButton按钮动画,可以自定义button属性. 效果图: <ignore_js_op> 使用方法: 使用时把ButtonA ...
css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...

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

css实现简单的告警提示动画效果相关推荐

最新文章

热门文章