Day23 CSS轉場動畫Transition

2021 iThome 鐵人賽

DAY 23

Modern Web

我的網頁前端小小小教室系列第 23 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-07 21:15:30

870 瀏覽

分享至

我們能夠做完一個網頁後，接下來我們可以讓這個網頁有更多的動態、趣味性，今天要介紹的動畫效果transition就可以幫助我們達成這個效果，我們來看怎麼使用吧!

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
        }

        .btn a{
            color: white;
            text-decoration: none;
        }
    </style>
    
<body>
    <div class="btn">
        <a href="">註冊</a>
    </div>
</body>

我們先建立一個按鈕，並幫他設定一下CSS，出來會長這個樣子。

接下來我們幫他加上transition動畫。

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
            transition: all 1s 0s ease;
        }

        .btn a{
            color: white;
            text-decoration: none;
        }

        .btn:hover{
            background-color: grey;
        }
    </style>
    
<body>
    <div class="btn">
        <a href="">註冊</a>
    </div>
</body>

transition用法

transition: transition-property | transition-duration | transition-timing-function | transition-delay

transition: 屬性轉換時間延遲執行時間速度

屬性:你所要有動畫的元素。例如:background-color、padding、color。
轉換時間:動畫的時間。
延遲執行時間:過幾秒才要執行這個動畫。
速度:動畫執行的速度。

先從背景圖片開始!你可能會問，那hover不就做得到了嗎?沒錯但動畫顧名思義，要讓他變化的過程中是平順的。讓我們繼續看下去。

hover

transition

看出兩者的差別了嗎?

而當然不只可以設定改變背景圖片而已，padding，寬高，文字顏色也可以!

    <style>
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
            transition: all 1s 0s ease ;
            
        }

        .btn a{
            color: white;
            text-decoration: none;
        }

        .btn:hover{
            background-color: grey;
            padding:10px 30px;
        }

        .btn:hover a{
            color:yellow;
        }
    </style>

這樣子同時就改變了文字、背景顏色、padding。

我們可以把他加入到我們昨天寫的網頁中!

        .article .wrap .item{
            width: 300px;
            margin: 20px;
            text-align: center;
            box-shadow: 1px 5px 5px grey;
            transition: all .5s 0s ease;
        }

        .article .wrap .item:hover{
            background-color: rgb(250, 94, 37);
        }