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

如平移、旋轉(zhuǎn)、縮放、傾斜效果

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

CSS3是通過transform實(shí)現(xiàn)的，它可以作用在款元素和行內(nèi)元素上，該屬性可以旋轉(zhuǎn)、縮放、移動(dòng)元素。

transform屬性值： translate（）：平移，基于x，y坐標(biāo)

scale（）：縮放函數(shù)

rotate（）：旋轉(zhuǎn)函數(shù)，取值一個(gè)度數(shù)值

skew（）：傾斜函數(shù)，取值一個(gè)度數(shù)值

?

1、translate(tx,ty);

向右下方移動(dòng)4px，8px

transform:translate(4px,8px);

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

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

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

?

注意：

translateX（tx）

表示只設(shè)置X軸的位移

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

?

translateY（ty）

表示只設(shè)置Y軸的位移

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

?

?

?

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

?

默認(rèn)值為 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()函數(shù)可以只接收一個(gè)值，也可以接收兩個(gè)值，只有一個(gè)值時(shí)，第二個(gè)值默認(rèn)和第一個(gè)值相等。

?

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

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

?

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

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

?

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

?

?

旋轉(zhuǎn)并放大圖片

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

?

可以僅設(shè)置沿著X軸或Y軸方向傾斜

skewX（ax）：表示只設(shè)置X軸的傾斜

skewY（ay）：表示只設(shè)置Y軸的傾斜

向左下角傾斜

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

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

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

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

?

小結(jié)：

rotate( )函數(shù)只是旋轉(zhuǎn)，而不會(huì)改變?cè)氐男螤?/p>

skew( )函數(shù)是傾斜，元素不會(huì)旋轉(zhuǎn)，會(huì)改變?cè)氐男螤?/p>

?

?

?

?

二、transition呈現(xiàn)的是一種過渡，是一種動(dòng)畫轉(zhuǎn)換的過程，如漸現(xiàn)、漸弱、動(dòng)畫快慢等

CSS3 transition的過渡功能更像是一種“黃油”，通過一些CSS的簡(jiǎn)單動(dòng)作觸發(fā)樣式平滑過渡

?

?

transition屬性是個(gè)復(fù)合屬性，可以簡(jiǎn)寫，如下：

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

transition包括四個(gè)屬性值：

transition-property 指定過渡或動(dòng)態(tài)模擬的css屬性

transition-duration 指定完成過渡所需要的時(shí)間

transition-timing-function 指定過渡函數(shù)

transition-delay 指定過渡開始出現(xiàn)的延遲時(shí)間

?

1、transition-property 過度屬性

定義轉(zhuǎn)換動(dòng)畫的CSS屬性名稱

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

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

?

2.transition-duration 過渡所需的時(shí)間

定義轉(zhuǎn)換動(dòng)畫的時(shí)間長(zhǎng)度，即從設(shè)置舊屬性到換新屬性所花費(fèi)的時(shí)間，單位為秒（s）

?

3、transition-timing-function 過渡動(dòng)畫函數(shù)

指定瀏覽器的過渡速度，以及過渡期間的操作進(jìn)展情況，通過給過渡添加一個(gè)函數(shù)來指定動(dòng)畫的快慢方式

ease：速度由快到慢（默認(rèn)值）

linear：速度恒速（勻速運(yùn)動(dòng)）

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

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

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

?

4、transition-delay 過渡延遲時(shí)間

指定一個(gè)動(dòng)畫開始執(zhí)行的時(shí)間，當(dāng)改變?cè)貙傩灾岛蠖嚅L(zhǎng)時(shí)間去執(zhí)行過渡效果

正值：元素過渡效果不會(huì)立即觸發(fā)，當(dāng)過了設(shè)置的時(shí)間值后才會(huì)被觸發(fā)

負(fù)值：元素過渡效果會(huì)從該時(shí)間點(diǎn)開始顯示，之前的動(dòng)作被截?cái)?/p>

0：默認(rèn)值，元素過渡效果立即執(zhí)行

?

?

?

?

實(shí)現(xiàn)圖標(biāo)旋轉(zhuǎn)動(dòng)畫

?

#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動(dòng)畫簡(jiǎn)介

animation實(shí)現(xiàn)動(dòng)畫主要由兩個(gè)部分組成

通過類似Flash動(dòng)畫的關(guān)鍵幀來聲明一個(gè)動(dòng)畫

在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫實(shí)現(xiàn)一個(gè)更為復(fù)雜的動(dòng)畫效果

?

設(shè)置關(guān)鍵幀：

@keyframes spread {

???0% {width:0;}

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

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

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

?}

?

一個(gè)簡(jiǎn)單的demo

?

動(dòng)畫的播放次數(shù)（animation-iteration-count）

值通常為整數(shù)，默認(rèn)值為1

特殊值infinite，表示動(dòng)畫無限次播放

動(dòng)畫的播放方向（animation-direction）

normal，動(dòng)畫每次都是循環(huán)向前播放

alternate，動(dòng)畫播放為偶數(shù)次則向前播放

動(dòng)畫的播放狀態(tài)（animation-play-state）

running將暫停的動(dòng)畫重新播放

paused將正在播放的元素動(dòng)畫停下來

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。