HTMLCSS筆記變形效果-過(guò)渡效果-動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)

一．transform
CSS3 提供了元素變形效果，也叫做變換。它可以將元素實(shí)現(xiàn)旋轉(zhuǎn)、縮放和平移的功能。屬性有兩個(gè)：transform 和 transform-origin。

對(duì)于 transform 的屬性值，具體如下表：

//向水平和垂直各移動(dòng) 200 像素，也可以使用百分比
transform: translate(200px,200px);

創(chuàng)新互聯(lián)建站專(zhuān)注于寧鄉(xiāng)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供寧鄉(xiāng)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，寧鄉(xiāng)網(wǎng)站制作、寧鄉(xiāng)網(wǎng)頁(yè)設(shè)計(jì)、寧鄉(xiāng)網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造寧鄉(xiāng)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供寧鄉(xiāng)網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

//向水平平移 200 像素，不加后面的 0 也可以

transform: translate(200px,0); transform: translateX(200px);

//向垂直平移 200 像素
transform: translate(0,200px); transform: translateY(200px);

//水平、垂直方向放大 1.5 倍transform: scale(1.5); transform: scale(1.5,1.5);

//水平、垂直方向縮小 0.8 倍
transform: scale(0.8,0.8);

//水平方向放大 1.5 倍
transform: scaleX(1.5);

//垂直方向放大 1.5 倍
transform: scaleY(1.5);

//旋轉(zhuǎn)元素，0 ~ 360 度之間，負(fù)值均可
transform: rotate(-45deg);

//傾斜元素，0 ~ 360 度之間，負(fù)值均可
transform: skew(45deg, 20deg);

//水平傾斜元素，0 ~ 360 度之間，負(fù)值均可
transform: skewX(45deg);

//垂直傾斜元素，0 ~ 360 度之間，負(fù)值均可
transform: skewY(45deg);

//通過(guò)六個(gè)數(shù)值指定矩形，其內(nèi)部公式計(jì)算較為復(fù)雜，請(qǐng)百度吧transform: matrix(1,0,0,1,30,30);

//不同的值可以累計(jì)，通過(guò)空格分割transform: rotate(-45deg) scale(1.5);

二．transform-origin
transform-origin 屬性可以設(shè)置變換的起點(diǎn)。默認(rèn)情況下，使用元素的中心作為起點(diǎn)。具體設(shè)置方案參考如下表：

這個(gè)屬性是用來(lái)改變變形的基準(zhǔn)點(diǎn)的，默認(rèn)是在元素的中心位置，如果你改變了基準(zhǔn)點(diǎn)。 它就會(huì)按照這個(gè)基準(zhǔn)點(diǎn)進(jìn)行變形。

//默認(rèn)值，以中心點(diǎn)變形
transform-origin: center center; transform-origin: 50% 50%;

//以左上角為基準(zhǔn)點(diǎn)變形transform-origin: left top; transform-origin: 0px 0px;

三．瀏覽器版本
CSS3 中的變形效果最低版本和需要前綴版本如下：

//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg); transform: rotate(45deg);

-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top; transform-origin: left top;

四.3D 變形簡(jiǎn)介
由于 3D 是立體三維，在 x、y 軸的基礎(chǔ)上一般會(huì)多出一個(gè) z 軸，深入躍出軸。以下是
3D 變形的屬性值表，如下：

3D 變形比 2D 變形出來(lái)的要晚一些，所以如果需要兼容舊版本瀏覽器，可以對(duì)照這個(gè)表。具體如下：

//兼容版本完×××式
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px); transform: translateZ(200px);

transform-style
transform-style 屬性是指定嵌套元素如何在 3D 空間中呈現(xiàn)。

//一般設(shè)置到當(dāng)前元素的父元素transform-style: preserve-3d;
需要再配合后面的功能屬性和變形配置，才能看到效果。同樣，這個(gè)屬性也需要加上各 種廠(chǎng)商前綴。
perspective
perspective 是 3D 變形的重要屬性，該屬性會(huì)設(shè)置查看者的位置，并將可視內(nèi)容映射到一個(gè)視錐上，繼而投放到一個(gè) 2D 平面上。

//設(shè)置查看者的距離位置，一般設(shè)置在元素的父元素上perspective: 1000px;
需要再配合后面的功能屬性和變形配置，才能看到效果。同樣，這個(gè)屬性也需要加上各 種廠(chǎng)商前綴。

3D 變形屬性
我們運(yùn)用前面 3D 功能屬性 transform-style 和 perspective 來(lái)構(gòu)建 3D 變形效果。
1.translate3d(x,y,z)
//需要 3D 位移的 HTML 結(jié)構(gòu)，必須有父元素包含
<div id="a">
<img src="img.png" alt="" />
</div>

//CSS 部分，父元素設(shè)置 3D 呈現(xiàn)且設(shè)置透視距離
#a {
perspective: 1000px; transform-style: preserve-3d;
}
img {
//z 軸可以是負(fù)值
transform: translate3d(300px,100px,240px);
}

2.translateZ(z)
//可以單獨(dú)設(shè)置 z 軸，z 軸可以是負(fù)值
img {
transform: translateZ(240px);
}

3.scale3d(x,y,z)
//3D 縮放，單獨(dú)設(shè)置無(wú)效，需要配合角度
img {
transform: scale3d(1,1,1.5) rotateX(45deg);
}

4.scaleZ(z)
//單獨(dú)設(shè)置 z 軸，x 和 y 軸默認(rèn)為 1 img {
transform: scaleZ(1.5) rotateX(45deg);
}

5.rotate3d(x,y,z,a)
//設(shè)置 3D 旋轉(zhuǎn)，a 表示角度，xyz 是 0 或 1 之間的數(shù)值
transform: rotate3d(1,0,0,45deg);

6.rotateX(a)、rotateY(a)、rotateZ(a)
// 單 獨(dú) 設(shè) 置 3D 旋 轉(zhuǎn) transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

最后一個(gè) matrix3d 就不多說(shuō)了，忽略。

CSS3 還提供了 perspective-origin 屬性來(lái)設(shè)置 3D 變形中的源點(diǎn)角度。該屬性默認(rèn)值為 50% 50%也就是 center center。

//源點(diǎn)設(shè)置為右上方變形perspective-origin: top right;

CSS3 還提供了一個(gè)在元素中設(shè)置透視的值 perspective(長(zhǎng)度值)，但它還是和在父元素設(shè)置有一定不同。因?yàn)楦冈卣麄€(gè)作為透視，而元素自己作為透視，導(dǎo)致不同。
//具體測(cè)試看透視的距離img {
transform: perspective(1000px) rotateY(45deg);
}

過(guò)渡簡(jiǎn)介
過(guò)渡效果一般是通過(guò)一些簡(jiǎn)單的 CSS 動(dòng)作觸發(fā)平滑過(guò)渡功能，比如：:hover、:focus、
:active、:checked 等。CSS3 提供了 transition 屬性來(lái)實(shí)現(xiàn)這個(gè)過(guò)渡功能，主要屬性如下表：
我們先創(chuàng)建一個(gè)沒(méi)有過(guò)渡效果的元素，然后通過(guò):hover 來(lái)觸發(fā)它。在沒(méi)有任何過(guò)渡效果的觸發(fā)，會(huì)立即生硬的執(zhí)行觸發(fā)。
//設(shè)置元素樣式div {
width: 200px; height: 200px;
background-color: white; border:1px solid green;
}
//鼠標(biāo)懸停后背景變黑，文字變白div:hover {
background-color: black; color: white;

margin-left: 50px;
}

transition-property
首先，設(shè)置過(guò)渡的第一個(gè)屬性就是指定過(guò)渡的屬性。同樣，你需要指定你要過(guò)渡某個(gè)元 素的兩套樣式用于用戶(hù)和頁(yè)面的交互。那么就使用 transition-property 屬性，詳細(xì)屬性值如下表：

從上門(mén)的列表中來(lái)看，一般來(lái)說(shuō)，none 用于本身有過(guò)渡樣式從而取消。而 all，則是支持所有 transition-property 樣式，還有一種是指定 transition-property 中的某些樣式。那么 transition-proerty 支持的樣式有哪些？如下表所示：


//設(shè)置背景和文字顏色采用過(guò)渡效果
transition-property: background-color, color, margin-left;
transition-duration
如果單純?cè)O(shè)置過(guò)渡的樣式，還不能夠立刻實(shí)現(xiàn)效果。必須加上過(guò)渡所需的時(shí)間，因?yàn)槟? 認(rèn)情況下過(guò)渡時(shí)間為 0。
//設(shè)置過(guò)渡時(shí)間為 1 秒鐘，如果是半秒鐘可以設(shè)置為.5s transition-duration: 1s;

transition-timing-function
當(dāng)過(guò)渡效果運(yùn)行時(shí)，比如產(chǎn)生緩動(dòng)效果。默認(rèn)情況下的緩動(dòng)是：元素樣式從初始狀態(tài)過(guò) 渡到終止?fàn)顟B(tài)時(shí)速度由快到慢，逐漸變慢，即 ease。也是默認(rèn)值，其他幾種緩動(dòng)方式如下表所示：

//恒定速度
transition-timing-function: linear;

以上五種都是設(shè)定好的屬性值，我們也可以自定義這個(gè)緩動(dòng)。使用 cubic-bezier()
屬性值，里面?zhèn)鬟f四個(gè)參數(shù) p0,p1,p2,p3，值在 0~1 之間。
//自定義緩動(dòng)
transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);

至于具體這些數(shù)值干什么的，怎么才可以精確得到相關(guān)的信息，這個(gè)要了解計(jì)算機(jī)圖形 學(xué)中的三次貝塞爾曲線(xiàn)的相關(guān)知識(shí)，類(lèi)似與 photoshop 中的曲線(xiàn)調(diào)色。這里我們忽略。

還有一種不是平滑過(guò)渡，是跳躍式過(guò)渡，屬性值為：steps(n,type)。第一個(gè)值是一 個(gè)數(shù)值，表示跳躍幾次。第二個(gè)值是 start 或者 end，可選值。表示開(kāi)始時(shí)跳躍，還是結(jié)束時(shí)跳躍。
//跳躍 10 次至結(jié)束
transition-timing-function: steps(10,end);

transition-delay
這個(gè)屬性可以設(shè)置一個(gè)過(guò)渡延遲效果，就是效果在設(shè)置的延遲時(shí)間后再執(zhí)行。使用
transition-delay 屬性值。如果有多個(gè)樣式效果，可以設(shè)置多個(gè)延遲時(shí)間，以空格隔開(kāi)。
//設(shè)置延遲效果
transition-delay: 0s, 1s, 0s;

簡(jiǎn)寫(xiě)和版本
我可以直接使用 transition 來(lái)簡(jiǎn)寫(xiě)，有兩種形式的簡(jiǎn)寫(xiě)。第一種是，每個(gè)樣式單獨(dú)聲明；第二種是不去考慮樣式，即使用 all 全部聲明。
//單獨(dú)聲明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

//如果每個(gè)樣式都是統(tǒng)一的，直接使用 all transition: all 1s ease 0s;

為了兼容舊版本，需要加上相應(yīng)的瀏覽器前綴，版本信息如下表：

//兼容完整版
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s; transition: all 1s ease 0s;

動(dòng)畫(huà)簡(jiǎn)介
CSS3 提供了類(lèi)似 Flash 關(guān)鍵幀控制的動(dòng)畫(huà)效果，通過(guò) animation 屬性實(shí)現(xiàn)。那么之前的 transition 屬性只能通過(guò)指定屬性的初始狀態(tài)和結(jié)束狀態(tài)來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，有一定的局限性。
animation 實(shí)現(xiàn)動(dòng)畫(huà)效果主要由兩個(gè)部分組成：
1.通過(guò)類(lèi)似 Flash 動(dòng)畫(huà)中的關(guān)鍵幀聲明一個(gè)動(dòng)畫(huà)；
2.在 animation 屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)。

CSS3 提供的 animation 是一個(gè)復(fù)合屬性，它包含了很多子屬性。如下表所示：

除了這 9 個(gè)屬性之外，動(dòng)畫(huà)效果還有一個(gè)重要的屬性，就是關(guān)鍵幀屬性：@keyframes。它的作用是聲明一個(gè)動(dòng)畫(huà)，然后在 animation 調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)。

//基本格式，“name”可自定義@keyframes name {
/.../
}

屬性詳解
在講解動(dòng)畫(huà)屬性之前，先創(chuàng)建一個(gè)基本的樣式。
//一個(gè) div 元素
<div>我是 HTML5</div>

//設(shè)置 CSS div {
width: 200px; height: 200px;
background-color: white; border: 1px solid green;
}

1.@keyframes
//創(chuàng)建動(dòng)畫(huà)的第一步，先聲明一個(gè)動(dòng)畫(huà)關(guān)鍵幀。@keyframes myani {
0% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;
}
100% {
background-color: white; margin-left:0px;
}
}

//或者重復(fù)的，可以并列寫(xiě)在一起@keyframes myani {
0%, 100% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;

}
}

2.animation-name
//調(diào)用@keyframes 動(dòng)畫(huà)
animation-name: myani;

3.animation-duration
//設(shè)置動(dòng)畫(huà)播放的時(shí)間animation-duration: 1s;

當(dāng)然，以上通過(guò)關(guān)鍵幀的方式，這里插入了三個(gè)關(guān)鍵幀。0%設(shè)置了白色和左偏移為 0， 和初始狀態(tài)一致，表明從這個(gè)地方開(kāi)始動(dòng)畫(huà)。50%設(shè)置了黑色，左偏移 100px。而 100%則是最后一個(gè)設(shè)置，又回到了白色和左偏移為 0。整個(gè)動(dòng)畫(huà)就一目了然了。
而對(duì)于關(guān)鍵幀的用法，大部分用百分比比較容易控制，當(dāng)然，還有其他一些控制方法。

//從什么狀態(tài)過(guò)渡到什么狀態(tài)@keyframes myani {
from {
background-color: white; margin-left:0px;
}
to {
background-color: black; margin-left:100px;
}
}

4.animation-timing-function
//設(shè)置緩動(dòng)
animation-timing-function: ease-in;

3.animation-delay
//設(shè)置延遲時(shí)間animation-delay: 1s;

4.animation-iteration-count
//設(shè)置循環(huán)次數(shù)
animation-iteration-count: infinite;

5.animation-direction
//設(shè)置緩動(dòng)方向交替
animation-direction: alternate;

6.animation-play-state
//設(shè)置停止播放動(dòng)畫(huà)
animation-play-state: paused;

7.animation-fill-mode
//設(shè)置結(jié)束后不在返回
animation-fill-mode: forwards;

//both 需要結(jié)合，次數(shù)和播放方向animation-iteration-count: 4; animation-direction: alternate;

簡(jiǎn)寫(xiě)和版本
//簡(jiǎn)寫(xiě)形式完整版
animation: myani 1s ease 2 alternate 0s both;

為了兼容舊版本，需要加上相應(yīng)的瀏覽器前綴，版本信息如下表：

//兼容完整版，Opera 在這個(gè)屬性上加入 webkit，所以沒(méi)有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both; transition: all 1s ease 0s;

//@keyframes 也需要加上前綴
@-webkit-keyframes myani {...} @-moz-keyframes myani {...}
@-o-keyframes myani {...} @-ms-keyframes myani {...} keyframes myani {...}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享文章：HTMLCSS筆記變形效果-過(guò)渡效果-動(dòng)畫(huà)效果-創(chuàng)新互聯(lián)
本文URL：http://www.muchs.cn/article18/dsoedp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、電子商務(wù)、自適應(yīng)網(wǎng)站、靜態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)