css 动画 呼吸 呼吸灯 效果

 

<div class="yellow"></div>

使用 CSS3 animation（动画） 属性 实现动画效果

.yellow {
   	position: relative;
  	width: 20px;
  	height: 20px;
  	border-radius: 50%;
  	background: #FFB22B;
}
.yellow::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	background: #FFB22B;
	border-radius: 50%;
	opacity: 0.2;
	animation: breath .6s linear .5s infinite alternate; // 呼吸动画实现
  }
@keyframes breath { // 关键帧规则
    0%   { opacity: 0.2; }
    100% { opacity: 0; }
}