1.material風格按鈕

material風格按鈕有個很好玩的特效起宽，就是在點擊按鈕時，會有一個圓圈擴散的效果济榨，看了幾個組件庫都用了這個效果坯沪，決定用CSS3加上原生js自己來實現(xiàn)以下

2.實現(xiàn)

html結構只需要內層一個用來裝文本的容器，之后用js添加一個圓形遮罩層就行

<button class="btn">
    <div class="text">primary</div>
</button>

樣式上則是用的CSS3動畫擒滑，通過添加相應的動畫類腐晾，配合transform將圓圈放大

.btn{
    position: relative;
    padding: 8px 16px;
    background-color: rgba(0, 188, 212,1);
    color: #fff;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    transition: background-color 200ms;
    cursor: pointer;
    overflow: hidden;

    &:hover{
        background-color: rgba(0, 188, 212,0.8);
    }

    .mask{
        position: absolute;
        border-radius: 100%;
        background-color: hsla(0,0%,100%,.45);
        transform: scale(0);
        z-index: 1;

        &.drop{
            animation: button-ripple linear 500ms;
        }
    }

    .text{
        position: relative;
        z-index: 2;
    }
}

@keyframes button-ripple{
    from{
        transform: scale(0);
        opacity: 1;
    }

    to{
        transform: scale(2);
        opacity: 0;
    }
}

• 因為需要找到點擊的位置，這里就需要js來完成了丐一，實現(xiàn)重復動畫的思路是藻糖，通過刪除遮罩層上的動畫類，再添加上動畫類
• 但是一開始直接刪除后添加動畫類库车，第二次點擊并沒有效果巨柒，可能瀏覽器在這里做了優(yōu)化，將兩次的操作合并了凝颇，所以最后想到異步執(zhí)行后面的添加類操作潘拱，可以實現(xiàn)重復點擊效果疹鳄。

let btn=document.querySelector('.btn');
    
    btn.addEventListener('click',function(event){
        let mask=btn.querySelector('.mask');
        if(!mask){
            mask=document.createElement('div');
            mask.className='mask';
            mask.style.width=mask.style.height=Math.max(btn.offsetWidth,btn.offsetHeight)+'px';
            btn.appendChild(mask);
        }

        let left=event.clientX-btn.getBoundingClientRect().left-mask.offsetWidth/2+'px';
        let top=event.clientY-btn.getBoundingClientRect().top-mask.offsetHeight/2+'px';

        mask.classList.remove('drop');
        mask.style.left=left;
        mask.style.top=top;
        setTimeout(function(){
            mask.classList.add('drop');
        },0);
    });