需求：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”，拉你进程序员技术讨论群.
