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

資訊專欄INFORMATION COLUMN

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

MonoLog / 3085人閱讀

摘要：轉(zhuǎn)換能夠?qū)υ剡M(jìn)行移動縮放轉(zhuǎn)動拉長或拉伸。和和的參數(shù)可以為。過渡該屬性和配合使用，實現(xiàn)鼠標(biāo)移入動畫效果。實例動畫該屬性和配合使用。規(guī)則用于創(chuàng)建動畫。在中規(guī)定某項樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。

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

transform 轉(zhuǎn)換

transform 能夠?qū)υ剡M(jìn)行移動、縮放、轉(zhuǎn)動、拉長或拉伸。transform 分為2D轉(zhuǎn)換和3D轉(zhuǎn)換，由于目前瀏覽器對3D轉(zhuǎn)換的支持度還不好，所以以下主要講解2D轉(zhuǎn)換。

2D轉(zhuǎn)換方法

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

translateX(n)

translateY(n)

rotate(angle) 轉(zhuǎn)動，參數(shù)為角度

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

scaleX(n)

scaleY(n)

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

skewX(angle)

skewY(angle)

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

transform-origin

另外，還有一個transform-origin屬性，用來改變被轉(zhuǎn)換元素的位置，一般和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的參數(shù)可以為：left、right、center、length、% 。

transition 過渡

該屬性和 :hover 配合使用，實現(xiàn)鼠標(biāo)移入動畫效果。
要實現(xiàn)過渡，必須規(guī)定兩項內(nèi)容：

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

規(guī)定效果的時長

過渡屬性
屬性 描述
transition 簡寫屬性，在一個屬性中設(shè)置四個過渡屬性。
transition-property 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認(rèn)是 0。
transition-timing-function 規(guī)定過渡效果的時間曲線。默認(rèn)是 "ease"。
transition-delay 規(guī)定過渡效果何時開始。默認(rèn)是 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 規(guī)則用于創(chuàng)建動畫。在 @keyframes 中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。

@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 中創(chuàng)建動畫，把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。
通過規(guī)定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

規(guī)定動畫的名稱

規(guī)定動畫的時長

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

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

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

相關(guān)文章

  • CSS3 新特性

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

    justjavac 評論0 收藏0

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

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

    xeblog 評論0 收藏0

  • 過渡和動畫

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

    NoraXie 評論0 收藏0

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

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

    Aldous 評論0 收藏0

發(fā)表評論

0條評論

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