CSS3動畫實例——簡書「喜歡」動畫

在簡書裏面，每一篇文章底部都有喜歡這個按鈕，如同上圖的這個效果，體驗很是好，到底是怎麼作的呢？
首先，做爲前端攻城獅的咱們，來右鍵查看一波↓

看到這個其實是一個僞類，而後放的背景圖片，咱們把這個背景圖片在新標籤頁中打開，會看到這樣一個圖片，有點像之前作的那種雪碧圖

而後，咱們把這張圖片下載下來到本地，新建個HTML，先把button的基本樣式寫出來

<style>
    #like{
        background: #EA6F5A;
        color: white;
        padding: 13px 0 15px 0;
        font-size: 19px;
        border: 1px solid #EA6F5A;
        border-radius: 40px;
        width: 100px;
        position: relative;
        padding-left: 20px;
        cursor: pointer;
        text-align: center;
    }
</style>
<div class="like"  onclick="like()" id="like">喜歡</div>

獲得基本的按鈕樣式了

而後咱們再寫動畫的樣式
首先，咱們要數一下這個動畫總共有多少步，就是去數 喜歡的背景圖總共有多少幅，再去減一。數出來總共19步，先存着，後面會用到。
而後，咱們打算用僞類來實現這個動畫，
先寫基本的

.like::before{
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 50px;
        height: 50px;
}

而後咱們把那個背景圖引入進去

.like::before{
        content: '';
        position: absolute;
        left: 5px;
        top: 2px;
        width: 50px;
        height: 50px;
        background-image: url(https://cdn2.jianshu.io/assets/web/like_animation_steps-62a00a7b52377d3069927cdb8e61fd34.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: 1000px 50px;
        background-position: right;
}

這樣咱們就獲得了"喜歡"的最終完成的時候的樣式了

可是咱們須要像 簡書 那樣，點擊的時候會出現一個動畫，這個動畫怎麼實現的，相關技術傳送門
添加如下代碼

@keyframes like{
        0%{background-position: left;};
        100%{background-position: right;}
    }

這個就是定義一個動畫，開始的時候是最左邊，結束就是最右邊，還要在like的樣式里加多一句

animation:like  0.6s 1 steps(19);

這樣一刷新就能看到咱們的動畫了，爲了追求完美，即點擊的時候出現動畫，再點一下又沒有，再點一下又出來，咱們須要添加一個點擊事件。

<div class="like"  onclick="like()" id="like">喜歡</div>
    <script>
        function like(){
            var like = document.querySelector('#like');
            console.log(like.classList)
            if(like.classList.length == 0)
                like.className = 'like'
            else
                like.className = ''
        }
    </script>

這樣，一個最簡單的 簡書喜歡動畫就完成了。