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