css背景色闪烁

直接先看效果

1.做两个重叠的圆

<div>
    <div class="box"></div>
    <div class="box2 ">小马闪起来~</div>    
</div>

2.样式

@keyframes fade {
    from {
        opacity: 1.0;
    }
    50% {
        opacity: 0.0;
    }
    to {
        opacity: 1.0;
    }
}

 
.box {
	height: 100px;
	width:100px;
	border-radius:50%;
    background: #ff0;
    padding: 10px;
    font-size: 15px;
    animation: fade 2000ms infinite ease-in-out;
	z-index:1;
}
	
.box2 {
	height: 80px;
	width:80px;
	border-radius:50%;
    background: #ee0;
    padding: 10px;
    font-size: 15px;
    //animation: fade 2000ms infinite ease-in-out;
	z-index:2;
	margin-top:-110px;
	margin-left:10px;
	position:absolute;
}