1-2-11【CSS3】CSS過(guò)渡屬性

題外話：這節(jié)課非常有意思哦~可以讓元素動(dòng)起來(lái)啦

文章內(nèi)容輸出來(lái)源：拉勾教育大前端就業(yè)集訓(xùn)營(yíng)

1.概述

  • CSS3出現(xiàn)之前，前端一般使用Flash動(dòng)畫(huà)或JavaScript制作動(dòng)畫(huà)。
  • flash采用幀動(dòng)畫(huà)的形式制作動(dòng)畫(huà)，通過(guò)一幀一幀的畫(huà)面按照固定的順序和速度播放，比如說(shuō)老式膠片電影。

老式膠卷電影的經(jīng)典開(kāi)頭。

2.過(guò)渡屬性

  • 概述：在不使用Flash和js的情況下，使用過(guò)度屬性可自動(dòng)實(shí)現(xiàn)動(dòng)畫(huà)效果。
    當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)，即存在A和B兩種狀態(tài)，使用過(guò)渡屬性，即可實(shí)現(xiàn)A和B之間的平滑過(guò)渡動(dòng)畫(huà)效果。

  • 屬性寫(xiě)法：transition：過(guò)渡的屬性 過(guò)渡時(shí)間 運(yùn)動(dòng)曲線 延時(shí)時(shí)間;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: width 0.2s linear 0s;
        }
        .box:hover{
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

說(shuō)明：transition設(shè)置的意思是：“當(dāng)該元素的width屬性發(fā)生變化時(shí)，使變化過(guò)渡0.2s實(shí)現(xiàn)，使用線性的變化方式，延遲0s開(kāi)始過(guò)渡。
因?yàn)閠ransition屬性沒(méi)有監(jiān)視height屬性，所以就算height變化了，也是直接變化而沒(méi)有過(guò)渡動(dòng)畫(huà)。

單一屬性

transition-property過(guò)渡的屬性
  • 屬性值：
    • none：表示沒(méi)有屬性過(guò)渡；
    • all：表示所有變化的屬性都過(guò)渡；
    • 屬性名：使用具體屬性名，多個(gè)屬性名用逗號(hào)隔開(kāi)。

transition-duration和transition-delay

  • 概述：duration是過(guò)渡的時(shí)間長(zhǎng)度，delay是在過(guò)渡前的延遲時(shí)間。
  • 屬性值：以s為單位的時(shí)間長(zhǎng)度，就算是0也要加單位s。

transition-timing-function時(shí)間曲線

  • 概述：動(dòng)畫(huà)在播放時(shí)遵循的時(shí)間曲線。
  • 屬性值：
屬性值 描述
linear 規(guī)定以恒定的速度實(shí)現(xiàn)從開(kāi)始到結(jié)束的效果
ease 規(guī)定慢速開(kāi)始，然后變快，然后慢速結(jié)束的效果
ease-in 規(guī)定以慢速開(kāi)始，逐漸加速的效果
ease-out 規(guī)定以快速開(kāi)始，逐漸減速的效果
ease-in-out 規(guī)定以慢速開(kāi)始和結(jié)束的效果
cubic-bezier(x1,y1,x2,y2) 用兩個(gè)點(diǎn)的坐標(biāo)值，計(jì)算出一條貝塞爾曲線，作為動(dòng)畫(huà)的時(shí)間曲線

說(shuō)明：如圖所示，貝塞爾曲線是由兩個(gè)點(diǎn)計(jì)算得到的一條時(shí)間曲線，所以在cubic-bezier()中，只需要提供兩個(gè)點(diǎn)，就可以指定一條你自定義的時(shí)間曲線。

兼容性：IE10、Firefox、Chrome以及Opera瀏覽器支持transition屬性。Safari需要加前綴-webkit-。

3.2D轉(zhuǎn)換

  • 概述：對(duì)元素進(jìn)行移動(dòng)、縮放、旋轉(zhuǎn)、拉長(zhǎng)或拉伸。配合過(guò)渡和即將學(xué)習(xí)的動(dòng)畫(huà)知識(shí)，幾乎可以完全取代Flash。
  • 屬性名：transform
  • 屬性值：根據(jù)不同的屬性值，實(shí)現(xiàn)不同的2D轉(zhuǎn)換。

注意！ transform是一個(gè)獨(dú)立的屬性，并不需要搭配transition才能生效。我只是為了例子更加直觀所以才一起寫(xiě)的，不要被誤導(dǎo)哦~

位移 translate()
  • 概述：對(duì)元素進(jìn)行水平&垂直方向上的移動(dòng)。
  • 書(shū)寫(xiě)語(yǔ)法：
屬性值 說(shuō)明
translate(x,y) x,y分別是水平和垂直方向的距離，可以為px也可以為%
translate(x) 只有一個(gè)數(shù)值，表示水平方向的位移 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 位移屬性 */
           transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

說(shuō)明：利用偽類(lèi)選擇器hover，實(shí)現(xiàn)鼠標(biāo)移動(dòng)至盒子上方時(shí)，盒子向右向下各位移100像素。

縮放 scale()
  • 概述：在元素的寬高兩個(gè)維度對(duì)元素進(jìn)行縮放。
  • 書(shū)寫(xiě)語(yǔ)法：
屬性值 說(shuō)明
scale(x,y) x,y分別是改變寬度和高度的倍數(shù)
scale(n) 只有一個(gè)數(shù)值，表示寬高同時(shí)縮放n倍
scaleX(n) 改變?cè)氐膶挾?/td>
scaleY(n) 改變?cè)氐母叨?/td> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            transition: all 0.5s linear 0s;
        }
        div:hover{
            /* 縮放 */
            transform: scale(0.5,1.5);
        }
    </style>
</head>
<body>
    <br>
    <br>
    <br>
    <div></div>
</body>
</html>

說(shuō)明：如圖所示，縮放盒子的寬度為50%，縮放盒子的高度為150%。

旋轉(zhuǎn) rotate()
  • 概述：在元素的寬高兩個(gè)維度對(duì)元素進(jìn)行縮放。
  • 書(shū)寫(xiě)語(yǔ)法：transform: rotate(數(shù)字deg)
    • 說(shuō)明：deg為度數(shù)單位，正數(shù)為順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)為逆時(shí)針旋轉(zhuǎn)。
    • 注意：元素旋轉(zhuǎn)后坐標(biāo)軸也會(huì)發(fā)生變化！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            position: relative;
            left: 50px;
            top: 50px;
            transition: all 0.5s linear 0s;
        }
        .box2{
            background-color: pink;
        }
        .box2:hover{
            transform: rotate(45deg) translate(100px);
        }
        .box1{
            background-color: red;
        }
        .box1:hover{
            transform: translate(100px) rotate(45deg) ;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

說(shuō)明：因?yàn)樾D(zhuǎn)后，元素的坐標(biāo)軸也會(huì)跟著旋轉(zhuǎn)，所以旋轉(zhuǎn)后的位移會(huì)以新的坐標(biāo)軸為基準(zhǔn)進(jìn)行旋轉(zhuǎn)，就導(dǎo)致了粉色盒子的情況。而同比紅色的盒子，是先位移后旋轉(zhuǎn)，位移時(shí)坐標(biāo)軸沒(méi)有受到影響，所以符合我們的預(yù)期。

傾斜 skew()
  • 概述：在元素的水平方向和垂直方向上進(jìn)行2D傾斜。
  • 書(shū)寫(xiě)語(yǔ)法：transform: skew(數(shù)字deg,數(shù)字deg);
  • 注意：兩個(gè)屬性值分別表示水平和垂直方向傾斜的角度，屬性值可以為正可以為負(fù)，第二個(gè)數(shù)值不寫(xiě)默認(rèn)為0。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s linear 0s;
            position: relative;
            top: 50px;
            left: 50px;
        }
        div:hover{
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

說(shuō)明：此處以“在水平方向的傾斜”為例，注意，雖然傾斜了，但是坐標(biāo)軸并沒(méi)有發(fā)生變化。

transform-origin屬性
  • 概述：調(diào)整元素的水平和垂直方向基準(zhǔn)點(diǎn)的位置。
  • 作用：主要用于旋轉(zhuǎn)，旋轉(zhuǎn)是以元素的基準(zhǔn)點(diǎn)進(jìn)行變換的，基準(zhǔn)點(diǎn)的位置不同，旋轉(zhuǎn)的效果也不同。
  • 書(shū)寫(xiě)方式：transform-origin: 水平方向 垂直方向;
  • 屬性值：
    • 水平方向：可以使用關(guān)鍵字left、center、right以及像素值和百分比。
    • 垂直方向：可以使用關(guān)鍵字top、center、bottom以及像素值和百分比。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 100px;
            position: relative;
            transition: all 0.5s linear 0s;
            margin: 50px auto;
        }
        .box1{
            background-color: pink;
            transform-origin: center center;
        }
        .box1:hover{
            transform: rotate(45deg);
        }
        .box2{
            background-color: red;
            transform-origin: left top;
            margin: 0px auto;
        }
        .box2:hover{
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <br>
    <div class="box2"></div>
</body>
</html>

說(shuō)明：粉色盒子的基準(zhǔn)點(diǎn)是盒子的正中心，所以旋轉(zhuǎn)起來(lái)是以中心為基準(zhǔn)順時(shí)針旋轉(zhuǎn)45°；而紅色盒子的基準(zhǔn)點(diǎn)是左上頂點(diǎn)，所以旋轉(zhuǎn)起來(lái)是以左上頂點(diǎn)為中心順時(shí)針旋轉(zhuǎn)45°，兩者效果因基準(zhǔn)點(diǎn)位置不同而大相徑庭。

前端文章匯總目錄

http://m.itdecent.cn/p/6d80dd616ff4

結(jié)束語(yǔ)：一花一世界，一木一浮生，愿與諸君共勉

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容