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

資訊專欄INFORMATION COLUMN

CSS3的過渡和動畫

andong777 / 2493人閱讀

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

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

轉化

CSS3的轉化分為以下幾種：

translate 移動

rotate　旋轉

scale　縮放

skew　傾斜

matrix　混合

每種轉化都還有對應的3d版本

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

translate　移動

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

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 旋轉

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

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

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

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

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

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 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

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 */
}
截圖總結

2D 版

3D 版

transition 過渡

CSS3中，我們為了添加某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。

過渡和動畫的區別

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

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

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

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

transition 屬性 

div {
    transition-property: width; /*可以使用轉化更好的過渡 */
    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，我們可以創建動畫，它可以取代許多網頁動畫圖像，Flash動畫，和JAVAScripts。
動畫屬性：

動畫制作過程

1.通過@keyframes規則創建動畫

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

2.元素綁定動畫

span {
    display: inline-block; /*內聯元素要轉成block元素 */
    animation: changeColor 1s linear; /*綁定動畫，并設置動畫時間和執行曲線 */
}

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

@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;}
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115611.html

相關文章

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

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

    waruqi 評論0 收藏0

  • CSS3轉換過渡動畫

    摘要：轉換能夠對元素進行移動縮放轉動拉長或拉伸。和和的參數可以為。過渡該屬性和配合使用，實現鼠標移入動畫效果。實例動畫該屬性和配合使用。規則用于創建動畫。在中規定某項樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。 CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。 transform 轉換 transform 能夠對元...

    MonoLog 評論0 收藏0

  • 過渡和動畫

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

    NoraXie 評論0 收藏0

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

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

    zqhxuyuan 評論0 收藏0

  • CSS3 新特性

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

    justjavac 評論0 收藏0

發表評論

0條評論

andong777

男|高級講師

TA的文章

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