一、CSS3變形是一些效果的集合

如平移、旋轉、縮放、傾斜效果

每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化。

CSS3是通過transform實現的，它可以作用在款元素和行內元素上，該屬性可以旋轉、縮放、移動元素。

transform屬性值： translate（）：平移，基于x，y坐標

scale（）：縮放函數

rotate（）：旋轉函數，取值一個度數值

skew（）：傾斜函數，取值一個度數值

?

1、translate(tx,ty);

向右下方移動4px，8px

transform:translate(4px,8px);

-webkit-transform:translate(4px,8px);

-o-transform:translate(4px,8px);

-moz-transform:translate(4px,8px);

?

注意：

translateX（tx）

表示只設置X軸的位移

transform:translate(100px,0) <==> transform:translateX(100px)

?

translateY（ty）

表示只設置Y軸的位移

transform:translate(0,100px) <==> transform:translateY(100px)

?

?

?

• 2、scale（sx，sy） ?/skel/

?

默認值為 1，

0~0.99 元素縮小 ??>1 元素放大

?

元素放大1.5倍

transform:scale(1.5);

-webkit-transform:scale(1.5);

-o-transform:scale(1.5);

-moz-transform:scale(1.5);

?

注意：

scale()函數可以只接收一個值，也可以接收兩個值，只有一個值時，第二個值默認和第一個值相等。

?

scaleX(sx)：表示只設置X軸的縮放

transform:scale(2,0) <==> transform:scaleX(2)

?

scaleY(sy)：表示只設置Y軸的縮放

transform:scale(0,2) <==> transform:scaleY(2)

?

• 3、rotate(45deg) ??/'rotet/

?

?

旋轉并放大圖片

transform : rotate(45deg) scale(1.5);

-webkit-transform : rotate(45deg) ?scale(1.5);

-o-transform : rotate(45deg) scale(1.5);

-moz-transform : rotate(45deg) scale(1.5);

?

• 4、skew(a) /skju

?

可以僅設置沿著X軸或Y軸方向傾斜

skewX（ax）：表示只設置X軸的傾斜

skewY（ay）：表示只設置Y軸的傾斜

向左下角傾斜

transform: skew(40deg,-20deg);

????????????-webkit-transform: skew(40deg,-20deg);

????????????-moz-transform: skew(40deg,-20deg);

????????????-o-transform: skew(40deg,-20deg);

?

小結：

rotate( )函數只是旋轉，而不會改變元素的形狀

skew( )函數是傾斜，元素不會旋轉，會改變元素的形狀

?

?

?

?

二、transition呈現的是一種過渡，是一種動畫轉換的過程，如漸現、漸弱、動畫快慢等

CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡單動作觸發樣式平滑過渡

?

?

transition屬性是個復合屬性，可以簡寫，如下：

transition:[transition-property ?transition-duration ?transition-timing-function ??transition-delay ]

transition包括四個屬性值：

transition-property 指定過渡或動態模擬的css屬性

transition-duration 指定完成過渡所需要的時間

transition-timing-function 指定過渡函數

transition-delay 指定過渡開始出現的延遲時間

?

1、transition-property 過度屬性

定義轉換動畫的CSS屬性名稱

IDENT：指定的CSS屬性（width、height、background-color屬性等）

all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用all

?

2.transition-duration 過渡所需的時間

定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）

?

3、transition-timing-function 過渡動畫函數

指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫的快慢方式

ease：速度由快到慢（默認值）

linear：速度恒速（勻速運動）

ease-in：速度越來越快（漸顯效果）

ease-out：速度越來越慢（漸隱效果）

ease-in-out：速度先加速再減速（漸顯漸隱效果）

?

4、transition-delay 過渡延遲時間

指定一個動畫開始執行的時間，當改變元素屬性值后多長時間去執行過渡效果

正值：元素過渡效果不會立即觸發，當過了設置的時間值后才會被觸發

負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷

0：默認值，元素過渡效果立即執行

?

?

?

?

實現圖標旋轉動畫

?

#box img {-moz-transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;}#box img:hover {-moz-transform: rotate(360deg) scale(1.5);-webkit-transform: rotate(360deg) scale(1.5);-o-transform: rotate(360deg) scale(1.5);-ms-transform: rotate(360deg) scale(1.5);transform: rotate(360deg) scale(1.5);}

?

三、animation動畫簡介

animation實現動畫主要由兩個部分組成

通過類似Flash動畫的關鍵幀來聲明一個動畫

在animation屬性中調用關鍵幀聲明的動畫實現一個更為復雜的動畫效果

?

設置關鍵幀：

@keyframes spread {

???0% {width:0;}

???33% {width:23px;}

???66% {width:46px;}

???100% {width:69px;}

?}

?

一個簡單的demo

?

動畫的播放次數（animation-iteration-count）

值通常為整數，默認值為1

特殊值infinite，表示動畫無限次播放

動畫的播放方向（animation-direction）

normal，動畫每次都是循環向前播放

alternate，動畫播放為偶數次則向前播放

動畫的播放狀態（animation-play-state）

running將暫停的動畫重新播放

paused將正在播放的元素動畫停下來

總結

以上是生活随笔為你收集整理的[Java web编程]第2章 HTML与css网页开发基础（动画）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。