主要實現了點選喇叭可實現動畫效果，再次點選可靜止。

React中，

jsx部分：設定喇叭基本樣式，以及觸發事件等。

　　　　關於className的解釋：關於是否點選按鈕，來判斷喇叭展示的樣式。（鄙人能力不夠，只能通過這種方法控制）

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

程式碼有極大冗餘，但不知如何簡化，請教一波。