动画实现-微信语音小喇叭样式

主要实现了点击喇叭可实现动画效果，再次点击可静止。

React中，

jsx部分：设置喇叭基本样式，以及触发事件等。

　　　　关于className的解释：关于是否点击按钮，来判断喇叭展示的样式。（鄙人能力不够，只能通过这种方法控制）

this.state = { 　　btnStatus: true, }   changeBtn(){ 　　this.setState({ 　　　　btnStatus: !this.state.btnStatus, //设置按钮点击事件，该彬啊btnStatus的状态 　　}) }

<div className={ btnStatus ? 'static' : 'wave' } onClick={this.changeBtn.bind(this)}>
<div className="wifi-circle first"></div>
<div className="wifi-circle second"></div>
<div className="wifi-circle third"></div>
</div>

 

css部分：最重要设置样式，主要利用transition动画，同时还有三个小圆弧该如何书写。

.wave {
width: 40px;
height: 40px;
box-sizing: border-box;
position:relative;
overflow: hidden;
transform: rotate(135deg);
.wifi-circle {
border: 4px solid #FFF;
border-radius: 50%;
position: absolute;
}
.first {
width: 5px;
height: 5px;
background: rgb(51, 50, 50);
top: 35px;
left: 35px;
}
.second {
width: 25px;
height: 25px;
top: 25px;
left: 25px;
}
.third {
width: 40px;
height: 40px;
top: 15px;
left: 15px;
}
}

//不同之处在于，是否有keyframes动画效果的显现。
.static{
width: 40px;
height: 40px;
box-sizing: border-box;
position:relative;
overflow: hidden;
transform: rotate(135deg);
.wifi-circle {
border: 4px solid #FFF;
border-radius: 50%;
position: absolute;
}
@keyframes fadeInOut {
0% {
opacity: 0; /*初始状态 透明度为0 */
}
100% {
opacity: 1; /*结尾状态 透明度为1 */
}
}
.first {
width: 5px;
height: 5px;
background: rgb(51, 50, 50);
top: 35px;
left: 35px;
}

.second {
width: 25px;
height: 25px;
top: 25px;
left: 25px;
animation: fadeInOut 1s infinite 0.2s;
}

.third {
width: 40px;
height: 40px;
top: 15px;
left: 15px;
animation: fadeInOut 1s infinite 0.4s;
}
}

代码有极大冗余，但不知如何简化，请教一波。