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

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

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;
        }
    }

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