成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css:transform,transition,animation總結(jié)

sevi_stuo / 3135人閱讀

摘要：等同于貝塞爾曲線元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)速度是恒速。等同于貝塞爾曲線提供了類似關(guān)鍵幀控制的動畫效果，通過屬性實現(xiàn)。名稱說明用來指定一個關(guān)鍵幀動畫的名稱，這個動畫名必須對應(yīng)一個規(guī)則。

1. transform 2d
名稱 說明
transform 變形功能
transform-orign 指定變換起點
1.1 transform的屬性值
名稱 說明 參數(shù)
translate/translateX/translateY 平移 長度值或百分?jǐn)?shù)
scale/scaleX/scaleY 縮放 數(shù)值
rotate 旋轉(zhuǎn) 角度
skew 傾斜 角度
matrix 矩陣 略

例子：

 transform: translateX(100px);
 transform: translateX(50%);

 transform: scale(2);
 transform: scale(0.5);

 transform: rotate(45deg);順時針

 transform: skew(45deg,45deg);// 水平方向(0-90有意義) 豎直方向(0-90有意義)

附skew資料：CSS3 transform matrix矩陣與拉伸實例頁面

多重效果并行：只是效果，沒有過程，不存在線行：

transform: scale(0.5) rotate(45deg);
1.2 transform-orign

默認(rèn)是中心點。可以設(shè)其他值。第一個參數(shù)是x軸，其值可以是left,center,right,也可以是百分?jǐn)?shù)。第二個參數(shù)是y軸，其值可以是top,center,bottom，也可以使百分?jǐn)?shù)。

例子：

transform-origin: 0 0;
transform-origin: left top;
transform-origin: 50% 50%;
2. transform 3d
名稱 說明
transform-style 展現(xiàn)樣式(flat/perserve3d)
perspective 指定變換起點
2.1 transform

3d就是多了一個z軸。transfrom的屬性值比2d多以下：

名稱 說明 參數(shù)
translate3d(x,y,z)/translateZ(z) 平移 長度值或百分?jǐn)?shù)
scale3d(x,y,z)/scaleZ(z) 縮放 數(shù)值
rotateX(x)/rotate(y)/rotateZ(z) 旋轉(zhuǎn) 角度
matrix3d 矩陣 略
2.2 transform-style

指定嵌套元素如何在3d空間呈現(xiàn)。

名稱 說明
flat 2d屏幕
preserve-3d 3d屏幕
2.3 perspective

指眼睛距離3d元素的距離。

名稱 說明
none 默認(rèn)值，表示無限的角度來看 3D 物體，但看上去是平的
長度值 接受一個長度單位大于0的值，其單位不能為百分比。值越大，角度出現(xiàn)的越遠(yuǎn)，就好比你人離遠(yuǎn)一點看物體。值越小，正相反。
2.4 perspective-origin

變型基點，同transform-origin

例子：

p{
    width: 200px;
    height: 200px;
    background-color: gray;
}
p.b{
    transform: translate3d(100px,100px,-200px);
}
div{
    perspective: 1000px;
    transform-style: preserve-3d;
}
3. transition

過渡效果一般是通過一些簡單的 CSS 動作觸發(fā)平滑過渡功能，比如： :hover、 :focus、
:active、:checked 等。CSS3 提供了 transition 屬性來實現(xiàn)這個過渡功能，主要屬性如
下表：

名稱 說明 參數(shù)
transition-property 指定CSS 屬性 none,all,指定屬性
transition-duration 所需時間 1s,2s
transition-timing-function 過程函數(shù) ease,linear,ease-in,ease-out,ease-in-out
transition-delay 延時 1s,2s
transition 以上四種簡寫

沒有過渡效果的例子：

div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    background-color: green;
    color: white;
}


hello world

加上過度效果：

 div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;
}

簡寫形式：

transition: all 2s ease;
名稱 說明
linear 元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)速度是恒速。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease 默認(rèn)值，元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時速度由快到慢，逐漸變慢。等同于貝塞爾曲線(0.25, 0.1,0.25, 1.0)
ease-in 元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，速度越來越快，呈一種加速狀態(tài)。等同于貝塞爾曲線(0.42, 0,1.0, 1.0)
ease-out 元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，速度越來越慢，呈一種減速狀態(tài)。等同于貝塞爾曲線(0, 0, 0.58,1.0)
linear 元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)速度是恒速。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease-in-out 元素樣式從初始狀態(tài)過渡到終止?fàn)顟B(tài)時，先加速，再減速。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
4. animation

CSS3 提供了類似 Flash 關(guān)鍵幀控制的動畫效果，通過 animation屬性實現(xiàn)。那么之前的 transition屬性只能通過指定屬性的初始狀態(tài)和結(jié)束狀態(tài)來實現(xiàn)動畫效果，有一定的局限性。

animation 實現(xiàn)動畫效果主要由兩個部分組成：

1.通過類似 Flash 動畫中的關(guān)鍵幀聲明一個動畫；
2.在 animation 屬性中調(diào)用關(guān)鍵幀聲明的動畫。
名稱 說明
animation-name 用來指定一個關(guān)鍵幀動畫的名稱，這個動畫名必須對應(yīng)一個@keyframes規(guī)則。CSS 加載時會應(yīng)用 animation-name 指定的動畫，從而執(zhí)行動畫。
animation-duration 用來設(shè)置動畫播放所需的時間
animation-timing-function 用來設(shè)置動畫的播放方式
animation-delay 用來指定動畫的延遲時間
animation-iteration-count 用來指定動畫播放的循環(huán)次數(shù)
animation-direction 用來指定動畫的播放方向
animation-play-state 用來控制動畫的播放狀態(tài)
animation-fill-mode 用來設(shè)置動畫的時間外屬性
animation 以上的簡寫形式

代碼：

@keyframes anim {
    0%,100% {
        background-color: maroon;
        color: gray;
    }
    50% {
        background-color: black;
        color: white;
    }
}
div{
    width: 200px;
    height: 200px;
    background-color: maroon;
    color: gray;
}
div:hover{
    animation-name: anim;
    animation-duration: 5s;
}


hello world

或者：

@keyframes anim {
    from {
        background-color: maroon;
        color: gray;
    }
    to {
        background-color: black;
        color: white;
    }
}

簡寫：

animation: anim 5s ease;

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116565.html

相關(guān)文章

  • 10分鐘入門 CSS3 Animation

    摘要：中文譯為轉(zhuǎn)換，但我更傾向于稱呼它變形大名鼎鼎的變形金剛叫。意為縮放，顧名思義，是用于改變元素的大小。每個時間點對應(yīng)一個狀態(tài)，代表一個關(guān)鍵幀。我們可以在可視化的創(chuàng)建我們自己的貝塞爾曲線。 簡介 Animation可以讓你不用依賴javascript或jquery，用純CSS在網(wǎng)頁中輕松實現(xiàn)各種動畫效果。 兼容性 animation在絕大部分主流瀏覽器都得到了很好的支持！還在兼容IE9的同...

    Elle 評論0 收藏0

  • 【Hello CSS】第九章-如何畫一個體驗更好的動畫？

    摘要：那就是重力加速度的表現(xiàn)以及彈力球與空氣，地面所產(chǎn)生的摩擦力的表現(xiàn)。彈力球下落時，由于重力加速度的原因，所以速度會越來越大，往上跳時速度會越來越小直至。 作者：陳大魚頭 github： KRISACHAN 在上一節(jié)中， 不走心 地畫了一些 CSS圖案 ，本節(jié)就繼續(xù)不走心地 畫動畫 。 CSS的動畫屬性 在CSS中，animation 、 transition 跟 transform...

    BothEyes1993 評論0 收藏0

  • css過度與動畫

    摘要：綜上，上面的代碼的值都應(yīng)該加上，即逐幀動畫在實現(xiàn)一個卡通影片或者一個復(fù)雜的進(jìn)度指示框，或者的標(biāo)志時這種場景比較適應(yīng)逐幀動畫。這種平滑特性不適用于逐幀動畫的實現(xiàn)。 緩動效果 回彈動畫效果是比較常見的動畫，比如小球的運(yùn)動、對于尺寸變化和角度變化使用回彈效果可以增強(qiáng)動畫的體驗。小面介紹一些簡單的緩動效果的動畫。 彈跳動畫的實現(xiàn) css中所有過渡和動畫都是跟一條曲線（緩動曲線）有關(guān)的，這條曲線...

    Kross 評論0 收藏0

  • 3D滾動下拉菜單-簡直不要太任性

    摘要：看到一個很棒的菜單效果，分享一下原文滾動下拉菜單簡直不要太任性預(yù)覽先看看最終效果簡介由來最初看到這個是在年月，猛戳這里妙味官網(wǎng)，覺得非常炫。 看到一個很棒的菜單效果，分享一下 原文 3D滾動下拉菜單-簡直不要太任性 預(yù)覽(先看看最終效果) http://runjs.cn/detail/re75abbw 簡介(由來) 最初看到這個是在14年5月，猛戳這里：妙味官網(wǎng)，覺得非常炫。想...

    ruicbAndroid 評論0 收藏0

  • Python開發(fā)【前端篇】HTML5+CSS3

    摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。標(biāo)簽支持格式屬性可選第三方播放器CSS權(quán)重 CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。 權(quán)重的等級 可以把樣式的應(yīng)用方式分為幾個等級，按照等級來計算權(quán)重 1、!impo...

    番茄西紅柿 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<