css3過渡動畫 transition

時間 2019-11-13

標籤 css3 css 過渡動畫 transition 欄目 CSS 简体版

原文原文鏈接

transition

CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。

要實現這一點，必須規定兩項內容：css

指定要添加效果的CSS屬性

指定效果的持續時間

例如

這是下面代碼的預覽界面預覽界面html

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                height: 200px;
                width: 100px;
                background-color: #cccccc;
                margin: 20px auto;
                transition: all 2s;/*先用transition指定時間*/
            }
            /* 制定div的hover，也就是鼠標放在div上時div的變化 */
            div:hover{
                background-color: aliceblue;
                transform: scale(0.8) rotate(360deg);
                /* 這裏指定一些須要transform的東西，好比scale、rotate、translate等 */
            }
        </style>
    </head>
    <body>
        <div><p>點擊發生變化</p></div>
    </body>
</html>

學習連接

CSS3 經常使用四個動畫（旋轉、放大、旋轉放大、移動）

css3過渡教程

 CSS 簡單的鼠標懸浮過渡效果

 github連接
 11.html的預覽界面css3

相關標籤/搜索