前端深刻之css篇丨初探【transform】，手把手帶你實現1024程序員節動畫

時間 2020-11-25

標籤 css html 前端 css3 程序員 css3動畫前端工程師性能學習 flex 欄目 CSS 简体版

原文原文鏈接

寫在前面

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

提及來css動畫是一個很尬的事，一方面由於公司用css動畫比較少，另外一方面大部分開發者習慣了用JavaScript來作動畫，因此就致使了許多程序員比較排斥來學習css動畫（至少我是），可是一個不懂css動畫的前端工程師不能稱之爲掌握css3，其實當你真正學習css動畫以後，你會被它的魅力所吸引的，它能夠減小代碼量、提升性能。html

值此1024程序員佳節之際，我特此推出供同窗們學習的動畫小案例，這個案例很是簡單，可是他可有幫咱們鞏固上一篇學的animation，而且可以讓你對後面要學習的animation有一個基本的認識。前端

話很少說，跟我開始吧。css3

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四個大字，由於咱們要作憑空出現的跳躍效果，因此咱們把它的顏色設置爲了白色。css3動畫

製做簡單動畫

.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動畫！學習