思路同时改变透明度和圆圈的大小，无限循环
<!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; } 25% { transform: scale(0); opacity: 0.1; } 50% { transform: scale(0.1); opacity: 0.3; } 75% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.0; }}.container { position: relative; border: 1px solid #000; background: #f55e55;}.part { position: relative; margin: 200px auto; width: 90px; height: 90px; background: #f55e55;}/* 产生动画（向外扩散变大）的圆圈 */ .pulse-max { position: absolute; width: 90px; height: 90px; background: #fff; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out; animation-delay: 0.2s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; }.pulse-mid { position: absolute; left: 4px; top: 4px; width: 82px; height: 82px; background: #ff5e39; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 1.8s ease-out; -moz-animation: warn 1.8s ease-out; animation: warn 1.8s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}.pulse-min { position: absolute; left: 7px; top: 7px; width: 76px; height: 76px; background: #fff; border-radius: 50%; z-index: 1; opacity: 0; -webkit-animation: warn 2s ease-out; -moz-animation: warn 2s ease-out; animation: warn 2s ease-out;-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}.dot { position: absolute; left: 20px; top: 20px; width: 50px; height: 50px; line-height: 50px; color: #ff5e39; border-radius: 50%; background: #fff; z-index: 999; text-align: center;}</style>
</head> <body> <div class="container"> <div class="part"> <div class="pulse-max"></div> <div class="pulse-mid"></div> <div class="pulse-min"></div> <div class="dot">额头</div> </div></div> </body> </html>