国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS3的過渡和動畫

andong777 / 2498人閱讀

摘要：轉(zhuǎn)化的轉(zhuǎn)化分為以下幾種移動旋轉(zhuǎn)縮放傾斜混合每種轉(zhuǎn)化都還有對應的版本注意閉合的內(nèi)聯(lián)元素不支持轉(zhuǎn)化，過渡和動畫如等。

過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關內(nèi)容并記錄下。
在開始之前，首先看看CSS3的轉(zhuǎn)化。

轉(zhuǎn)化

CSS3的轉(zhuǎn)化分為以下幾種：

translate 移動

rotate　旋轉(zhuǎn)

scale　縮放

skew　傾斜

matrix　混合

每種轉(zhuǎn)化都還有對應的3d版本

注意：閉合的內(nèi)聯(lián)元素不支持轉(zhuǎn)化，過渡和動畫：如、、等。可以通過添加樣式　display: inline-block 或　display: block　來轉(zhuǎn)化成塊級元素。

translate　移動

translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當前元素位置移動。

span {
    display: inline-block;
    transform: translate(50px,100px); /* 向下移動50像素，向右移動100像素 */
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
rotate 旋轉(zhuǎn)

rotate()方法，在一個給定度數(shù)順時針旋轉(zhuǎn)的元素。負值是允許的，這樣是元素逆時針旋轉(zhuǎn)。

i {
    display: block;
    transform: rotate(30deg); /* 順時針旋轉(zhuǎn)30度，負數(shù)為逆時針旋轉(zhuǎn) */
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}
scale 縮放

scale()方法，該元素增加或減少的大小，取決于寬度（X軸）和高度（Y軸）的參數(shù)：

div {
    display: inline; /*這樣設置是縮放不生效 */
    transform: scale(2,3); /*長擴大2倍，寬擴大3倍，小于1的小數(shù)為縮小 */
    -ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 標準語法 */
}
skew 傾斜

skew() 包含兩個參數(shù)值，分別表示X軸和Y軸傾斜的角度，如果第二個參數(shù)為空，則默認為0，參數(shù)為負表示向相反方向傾斜。(想象成一根直的柱子，被推歪了...)

skewX();表示只在X軸(水平方向)傾斜。(橫著推歪了...)

skewY();表示只在Y軸(垂直方向)傾斜。(從上下壓給推歪了...)

div {
    transform: skew(30deg,20deg);
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
matrix 混合

matrix()方法和2D變換方法合并成一個。
matrix 方法有六個參數(shù)，包含旋轉(zhuǎn)，縮放，移動（平移）和傾斜功能。

div {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
截圖總結(jié)

2D 版

3D 版

transition 過渡

CSS3中，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候，無需使用Flash動畫或JavaScript。

過渡和動畫的區(qū)別

過渡和動畫都可以改變元素的樣式，但他們中間也有些不同：

過渡針對元素的樣式屬性，從一種樣式轉(zhuǎn)變到另一種，樣式按貝塞爾曲線隨時間變化，動畫針對元素本身，按關鍵幀改變元素的樣式效果

過渡比動畫簡單，當控制的效果也更粗糙，動畫更消耗性能，但可以做出更復雜的效果。

總的來說：一般簡單的樣式使用過渡，實在需要復雜的效果再考慮使用動畫

transition 屬性 

div {
    transition-property: width; /*可以使用轉(zhuǎn)化更好的過渡 */
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

/*簡寫 */
div {
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}
transition 過渡曲線

animate 動畫

CSS3，我們可以創(chuàng)建動畫，它可以取代許多網(wǎng)頁動畫圖像，F(xiàn)lash動畫，和JAVAScripts。
動畫屬性：

動畫制作過程

1.通過@keyframes規(guī)則創(chuàng)建動畫

/*創(chuàng)建動畫，字體顏色由紅變藍 */
@keyframes changeColor { 
    from { color: red; }
    to { color: blue; }
}

2.元素綁定動畫

span {
    display: inline-block; /*內(nèi)聯(lián)元素要轉(zhuǎn)成block元素 */
    animation: changeColor 1s linear; /*綁定動畫，并設置動畫時間和執(zhí)行曲線 */
}

動畫還可以使用百分比來更加精細的控制動畫流程：

@keyframes changeColor {
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: green;}
    75%  {color: pickle;}
    100% {color: blue;}
}
 
/* Safari 與 Chrome */
@-webkit-keyframes changeColor {
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: green;}
    75%  {color: pickle;}
    100% {color: blue;}
}

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115611.html

相關文章

  • css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

    摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調(diào)用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。 一、 CSS3變形（transform） 語法： transform ： no...

    waruqi 評論0 收藏0

  • CSS3轉(zhuǎn)換過渡動畫

    摘要：轉(zhuǎn)換能夠?qū)υ剡M行移動縮放轉(zhuǎn)動拉長或拉伸。和和的參數(shù)可以為。過渡該屬性和配合使用，實現(xiàn)鼠標移入動畫效果。實例動畫該屬性和配合使用。規(guī)則用于創(chuàng)建動畫。在中規(guī)定某項樣式，就能創(chuàng)建由當前樣式逐漸改為新樣式的動畫效果。 CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。 transform 轉(zhuǎn)換 transform 能夠?qū)υ?..

    MonoLog 評論0 收藏0

  • 過渡和動畫

    摘要：是一個簡寫屬性，用于設置四個過渡屬性過渡時間延遲時間屬性速度下面的表格列出了所有的轉(zhuǎn)換屬性實例在一個例子中使用所有過渡屬性二動畫規(guī)則如需在中創(chuàng)建動畫，您需要學習規(guī)則。在中規(guī)定某項樣式，就能創(chuàng)建由當前樣式逐漸改為新樣式的動畫效果。 一、transition 過渡 過渡效果一般由瀏覽器直接改變元素的CSS屬性實現(xiàn)，從一種狀態(tài)過渡到另一種狀態(tài)。 在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟...

    NoraXie 評論0 收藏0

  • CSS3熱身實戰(zhàn)--過渡與動畫（實現(xiàn)炫酷下拉，手風琴，無縫滾動）

    摘要：規(guī)定動畫的時長。注意子菜單要用隱藏，在顯示的時候再設置。如果不加，實際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標移上去子菜單，以及子菜單下面的。 1.前言 在自己的專欄上寫了十幾篇文章了，都是與js有關的。暫時還沒有寫過關于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實現(xiàn)三個特效，希望這三個特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

    zqhxuyuan 評論0 收藏0

  • CSS3 新特性

    摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內(nèi)陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標準，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規(guī)范進行開發(fā)，雖然標準的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

    justjavac 評論0 收藏0

發(fā)表評論

0條評論

andong777

男|高級講師

TA的文章

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