![](https://i-blog.csdnimg.cn/direct/31839ca035d345b8bb198abe19ca8c03.png)
<div className={styles.flicker}>
<div className={styles.alarmLamp}></div>
<div className={styles.ripple}></div>
</div>
.flicker {
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
text-align: center;
.alarmLamp {
width: 100%;
height: 100%;
background-image: radial-gradient(circle, red 46%, transparent 10%);
position: relative;
display: inline-block;
}
.ripple {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle,red 45%, #b72626 50%,red 58%,transparent 10%);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
animation: rippleEffect 2s infinite;
}
}