CSS3(2)--- 過渡(transition)

時間 2019-12-17

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

原文原文鏈接

CSS3(2)--- 過渡(transition)

1、概念

一、什麼是過渡

通俗理解 是從一個狀態 漸漸的過渡到 另一個狀態。css

好比一個盒子原先寬度爲100px,當鼠標點擊時盒子的寬度變成200px,若是直接從100px變化到200px。從視覺上看去並不友好。咱們更喜歡看到的是平滑的過渡。html

二、浮動的語法

屬性語法格式java

transition: 要過渡的屬性  花費時間  運動曲線  什麼時候開始;
// 若是有多組屬性變化，仍是用逗號隔開。前兩個屬性必須寫。後兩個能夠不寫。運動曲線默認勻速。開始時間默認0秒。

屬性值css3

注意動畫

- 若是想要全部的屬性都變化過渡， 寫一個all 就能夠
- transition-duration 花費時間 單位是 秒 s （這個秒是必定須要的）
- 運動曲線 默認是 ease
- 默認是 0s 立馬開始
- 過渡寫到自己上 誰作過渡動畫，寫到誰身上(下面例子說明)

運動曲線示意圖code

2、示例

一、示例一

效果htm

代碼blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3過渡</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /*transition: width 0.5s ease 0s, height 0.3s; 多組屬性用逗號分隔*/
        transition: all 1s; /*  這裏過渡是當前div，按照誰作過渡動畫，寫到誰身上，因此這裏要寫在這裏*/
    }
    div:hover {
        width: 400px;
        height: 300px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

二、示例二

效果it

代碼io

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS過渡</title>
    <style>
    div {
        width: 183px;
        height: 130px;
        border: 1px solid red;
        overflow: hidden;  /*多餘部分隱藏*/
    }
    div img {
        width: 193px;
        height: 130px;
        transition: all 0.4s; /*因此變化，過渡時間0.4秒*/
    }
    div:hover img {
        margin-left: -10px;  /*移動*/
    }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
    </div>
</body>
</html>

三、示例三

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css過渡</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .subnav {
        margin: 100px auto;
        width: 20px;
    }
    .subnav li {
        width: 20px;
        height: 20px;
        margin: 3px 0;
        background-color: pink;
        position: relative;
    }
    .subnav div {
        position: absolute;  /*子絕父相*/
        right: 0;
        top: 0;
        height: 20px;
        width: 0;
        background-color: purple;
        transition: all 0.6s;
        z-index: -1;  /*這裏設置定位級別小於父類,因此父類浮在它上面*/
    }
    .subnav li:hover div {
        width: 100px;
    }
    </style>
</head>
<body>
    <div class="subnav">
        <ul>
            <li>
                <div></div>
            </li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
    </div>
</body>
</html>

你若是願意有所做爲，就必須善始善終。(16)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。