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

資訊專欄INFORMATION COLUMN

CSS3轉換過渡動畫

MonoLog / 3070人閱讀

摘要：轉換能夠對元素進行移動縮放轉動拉長或拉伸。和和的參數可以為。過渡該屬性和配合使用，實現鼠標移入動畫效果。實例動畫該屬性和配合使用。規則用于創建動畫。在中規定某項樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

CSS3中有三個屬性：transform、transition、animation，一直容易搞混，今天特意拎出來理一理。

transform 轉換

transform 能夠對元素進行移動、縮放、轉動、拉長或拉伸。transform 分為2D轉換和3D轉換，由于目前瀏覽器對3D轉換的支持度還不好，所以以下主要講解2D轉換。

2D轉換方法

translate(x,y) 移動，參數為像素值

translateX(n)

translateY(n)

rotate(angle) 轉動，參數為角度

scale(x,y) 縮放，參數為倍數

scaleX(n)

scaleY(n)

skew(x-angle,y-angle) 傾斜，參數為角度

skewX(angle)

skewY(angle)

matrix() 參數為六個值的矩陣，可以描述以上所有轉換，用于復雜的轉換

transform-origin

另外，還有一個transform-origin屬性，用來改變被轉換元素的位置，一般和rotate()配合使用。

div
{
transform: rotate(45deg);
transform-origin:20% 40%;

-ms-transform: rotate(45deg);         /* IE 9 */
-ms-transform-origin:20% 40%;         /* IE 9 */

-webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */

-moz-transform: rotate(45deg);        /* Firefox */
-moz-transform-origin:20% 40%;        /* Firefox */

-o-transform: rotate(45deg);        /* Opera */
-o-transform-origin:20% 40%;        /* Opera */
}

transform-origin的參數可以為：left、right、center、length、% 。

transition 過渡

該屬性和 :hover 配合使用，實現鼠標移入動畫效果。
要實現過渡，必須規定兩項內容：

規定您希望把效果添加到哪個 CSS 屬性上

規定效果的時長

過渡屬性
屬性 描述
transition 簡寫屬性，在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果何時開始。默認是 0。
實例 
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}
animation 動畫

該屬性和 @keyframes 配合使用。

@keyframes

@keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

@keyframes中也可以用具體的百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

在 @keyframes 中創建動畫，把它捆綁到某個選擇器，否則不會產生動畫效果。
通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規定動畫的名稱

規定動畫的時長

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;    /* Firefox */
-webkit-animation: myfirst 5s;    /* Safari 和 Chrome */
-o-animation: myfirst 5s;    /* Opera */
}
動畫屬性
屬性 描述
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name 規定 @keyframes 動畫的名稱。
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
animation-delay 規定動畫何時開始。默認是 0。
animation-iteration-count 規定動畫被播放的次數。默認是 1。
animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。
animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode 規定對象動畫時間之外的狀態。

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

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

相關文章

  • CSS3 新特性

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

    justjavac 評論0 收藏0

  • 不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

    摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。 ...

    xeblog 評論0 收藏0

  • 過渡和動畫

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

    NoraXie 評論0 收藏0

  • 前端—初級階段2(5-8)

    摘要：我們可以設置多個關鍵幀通過百分比將動畫序列分割成多個節點在各節點中分別定義各屬性通過將動畫應用于相應元素樣式屬性動畫名稱持續時長默認是。播放方向測試播放完的狀態最后一個關鍵幀第一個關鍵幀測試播放狀態默認是。 內容介紹 CSS選擇器(基本、層級、屬性、偽類、偽狀態) CSS常用樣式屬性 CSS3 過渡、變換、動畫 CSS3 3D場景搭建與應用 一、CSS選擇器 CSS選擇器一共有五種...

    Aldous 評論0 收藏0

發表評論

0條評論

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