前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫

不是酸檸檬發表於2019-10-24
前端CSSORM程式設計師動畫

寫在前面

馬上就2020年了，不知道小夥伴們今年學習了css3動畫了嗎？

說起來css動畫是一個很尬的事，一方面因為公司用css動畫比較少，另一方面大部分開發者習慣了用JavaScript來做動畫，所以就導致了許多程式設計師比較排斥來學習css動畫（至少我是），但是一個不懂css動畫的前端工程師不能稱之為掌握css3，其實當你真正學習css動畫之後，你會被它的魅力所吸引的，它可以減少程式碼量、提高效能。

值此1024程式設計師佳節之際，我特此推出供同學們學習的動畫小案例，這個案例非常簡單，但是他可有幫我們鞏固上一篇學的animation，並且能夠讓你對後面要學習的animation有一個基本的認識。

話不多說，跟我開始吧。

1024動畫案例

前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫
這就是我們最終要實現的效果，還是比較簡單的，拿來當做一個入門動畫的小案例再好不過了。

搭建靜態頁

<style>
    .outBox ul{
        display: flex;
    }
    .outBox li{
        list-style: none;
        margin: 20px;
        font-size: 120px;
        position: relative;
        top: 0px;
        color:#fff;
    }
</style>
<body>
    <div class="outBox">
        <ul>
            <li>1</li>
            <li>0</li>
            <li>2</li>
            <li>4</li>
        </ul>
    </div>
</body>
複製程式碼

寫完之後你就會在螢幕上得到1024四個大字，因為我們要做憑空出現的跳躍效果，所以我們把它的顏色設定為了白色。

製作簡單動畫

前端深入之css篇丨初探【transform】，手把手帶你實現1024程式設計師節動畫

.outBox li:nth-child(1){
    animation: myMove 1.5s ease alternate infinite ;
}
.outBox li:nth-child(2){
    animation: myMove 1.5s ease 0.5s alternate infinite ;
}
.outBox li:nth-child(3){
    animation: myMove 1.5s ease 1s alternate infinite ;
}
.outBox li:nth-child(4){
    animation: myMove 1.5s ease 1.5s alternate infinite ;
}
@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;

    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;

    }
}

複製程式碼

加入這些程式碼，就會使每個數字都產生上下的動畫了，然後每個數字依次跳出來展示，並在其中變換顏色。由於都是上一個文章的內容，在這裡我就不再贅述了。

最終效果

@keyframes myMove{
    0%{
        color: rgb(229, 255, 80);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
    50%{
        color:rgb(2, 150, 200);
        top: 0px;
        transform: rotateY(180deg) scale(1.5);
    }
    100%{
        color: rgb(255, 106, 198);
        top: 160px;
        transform: rotateY(0deg) scale(1.0);
    }
}

複製程式碼

然後再在每個狀態里加入transform: rotateY(xxdeg) scale(1.0);就可以實現文章開始的圖片效果了。

這裡我們接觸到了transform屬性，也就是變形屬性，其中rotateY(0deg)的意思是以Y軸為對稱軸進行旋轉，括號中間的內容是旋轉角度。中scale(1.0)是操作放大縮小用的，括號中的內容負責大小。放到案例中的意思就是開始預設大小、預設角度，執行到中間文字左右對稱翻轉並且變大，再到執行結束改變成初始階段。

結論

看完這篇文章你會發現實現一個動畫其實很簡單，尤其是在你學會了animation之後，上道了學習transform自然簡單。translate（移動）以及transform（變形）其實並不是製作動畫的，只是變形和移動在動畫中經常會使用到，而且人們經常把這幾個屬性搞混，所以我拿他們一起來進行了講解。這個案例只是響應1024推出的練習案例，希望和我一起在學習css動畫的同學可以獨自寫一寫程式碼，相信你們一定能夠對動畫有自己的理解的，同時對接下來的學習也會起到很大的幫助。跟進我的腳步吧，跟我一起在2020年前掌握css動畫！

結語

以上就是本文章的全部內容了，如果有不正確的地方歡迎指正。

感謝您的閱讀，如果感覺有用不妨點贊/轉發。

前端深入系列是一個踩坑系列，是由我本人對工作和學習中所遇到的問題和踩過的坑的一個探索與總結，在此記錄分享出去，同時也是對自我技能的一個反思和追問。

前端路漫，踩坑不斷。

前端深入系列持續更新中……

以上2019-10-24。

相關文章