需求：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>
效果如下：
注：
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
公众号回复“1”，拉你进程序员技术讨论群.
