效果如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
@keyframes warn {
0% {transform: scale(0);opacity: 0.0;}
10% {transform: scale(0.2);opacity: 0.2;}
20% {transform: scale(0.4);opacity: 0.4;}
30% {transform: scale(0.6);opacity: 0.6;}
40% {transform: scale(0.8);opacity: 0.8;}
50% {transform: scale(1);opacity: 1;}
60% {transform: scale(1);opacity: 0.8;}
70% {transform: scale(1);opacity: 0.6;}
80% {transform: scale(1);opacity: 0.4;}
90% {transform: scale(1);opacity: 0.2;}
100% {transform: scale(1);opacity: 0;}
}
.container {
position: relative;
width: 40px;
height: 40px;
/*border: 1px solid #000;*/
animation: warn 0.3s ease-out;
animation-iteration-count: infinite;
}
/* 保持大小不變的小圓圈 */
.dot {
position: absolute;
width: 10px;
height: 10px;
left: 14px;
top: 14px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: 1px solid #f40d0d;
background: #f43d3db0;
border-radius: 20px;
z-index: 2;
animation: warn 0.1s ease-out;
animation-iteration-count: infinite;
}
/* 產生動畫（向外擴散變大）的圓圈 */
.pulse {
position: absolute;
width: 24px;
height: 24px;
left: 7px;
top: 7px;
border: 1px solid #f4313169;
background: #ed2b2b4a;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="dot"></div>
<div class="pulse"></div>
</div>
</body>
</html>