溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

怎么實現css3過渡動畫的效果

發(fā)布時間：2020-09-14 14:52:41 來源：億速云 閱讀：144 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了怎么實現css3過渡動畫的效果，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

首先我們來看一看transition屬性的定義和用法：

transition 屬性是一個簡寫屬性，用于設置四個過渡屬性。

transition-property：規(guī)定設置過渡效果的 CSS 屬性的名稱。

transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒。

transition-timing-function：規(guī)定速度效果的速度曲線。

transition-delay：定義過渡效果何時開始。

在看完了簡單介紹的transition屬性定義和用法之后。

現在我們具體來看一個css3實現過渡效果的代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置瀏覽器默認的兩個值，
        對本文沒有太大影響，不知道可以無視*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "華文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*變化的東西。all是所有*/
    transition-duration: 1s;/*變化過程的時間*/
    transition-timing-function: linear;/*linear是勻速變化*/
    transition-delay: 0s;/*沒有延遲變化*/
    /*下面的是簡寫屬性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>億速云火焰字</div>
</body>
</html>

感謝你能夠認真閱讀完這篇文章，希望小編分享怎么實現css3過渡動畫的效果內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手