CSS3動(dòng)畫，變形及背景操作

畫

animation-name: 要對(duì)當(dāng)前元素生效的關(guān)鍵幀的名字

animation-name: test;

animation-duration: 動(dòng)畫的執(zhí)行時(shí)間

animation-duration: 4s;

animation-delay:動(dòng)畫的延時(shí)

animation-delay: 2s;

nimation-iteration-count 動(dòng)畫執(zhí)行的次數(shù) 可選值：

次數(shù)
infinite 無限執(zhí)行

animation-iteration-count: 1;

animation-direction 指定動(dòng)畫運(yùn)行的方向可選值：

normal 默認(rèn)值從 from 向 to運(yùn)行每次都是這樣
reverse 從 to 向 from 運(yùn)行每次都是這樣
alternate 從 from 向 to運(yùn)行重復(fù)執(zhí)行動(dòng)畫時(shí)反向執(zhí)行
alternate-reverse 從 to 向 from運(yùn)行重復(fù)執(zhí)行動(dòng)畫時(shí)反向執(zhí)行

animation-direction: alternate-reverse;

animation-play-state: 設(shè)置動(dòng)畫的執(zhí)行狀態(tài) 可選值：

running 默認(rèn)值動(dòng)畫執(zhí)行
paused 動(dòng)畫暫停

animation-play-state: paused;

animation-fill-mode: 動(dòng)畫的填充模式可選值：

none 默認(rèn)值動(dòng)畫執(zhí)行完畢元素回到原來位置
forwards 動(dòng)畫執(zhí)行完畢元素會(huì)停止在動(dòng)畫結(jié)束的位置
backwards 動(dòng)畫延時(shí)等待時(shí)，元素就會(huì)處于開始位置
both 結(jié)合了forwards 和 backwards

animation-fill-mode: both;

混合使用

animation: test 2s 2 1s alternate;

實(shí)現(xiàn)動(dòng)畫

動(dòng)畫和過渡類似，都是可以實(shí)現(xiàn)一些動(dòng)態(tài)的效果，
不同的是過渡需要在某個(gè)屬性發(fā)生變化時(shí)才會(huì)觸發(fā)
動(dòng)畫可以自動(dòng)觸發(fā)動(dòng)態(tài)效果
設(shè)置動(dòng)畫效果，必須先要設(shè)置一個(gè)關(guān)鍵幀，關(guān)鍵幀設(shè)置了動(dòng)畫執(zhí)行每一個(gè)步驟

@keyframes test {
           /* from表示動(dòng)畫的開始位置 也可以使用 0% */
           from{
               margin-left: 0;
               background-color: orange;
          }

           /* to動(dòng)畫的結(jié)束位置 也可以使用100%*/
           to{
               background-color: red;
               margin-left: 700px;
          }
      }

變形transform

變形就是指通過CSS來改變?cè)氐男螤罨蛭恢?/span>
變形不會(huì)影響到頁(yè)面的布局
transform 用來設(shè)置元素的變形效果

translateX() 沿著x軸方向平移
translateY() 沿著y軸方向平移
translateZ() 沿著z軸方向平移
平移元素，百分比是相對(duì)于自身計(jì)算的
平移：

transform: translateY(-100px);

Z軸平移

設(shè)置視距

perspective: 800px;

z軸平移，調(diào)整元素在z軸的位置，正常情況就是調(diào)整元素和人眼之間的距離，距離越大，元素離人越近
z軸平移屬于立體效果（近大遠(yuǎn)小），默認(rèn)情況下網(wǎng)頁(yè)是不支持透視，如果需要看見效果必須要設(shè)置網(wǎng)頁(yè)的視距

transform: translateZ(800px);

旋轉(zhuǎn)

通過旋轉(zhuǎn)可以使元素沿著x y 或 z旋轉(zhuǎn)指定的角度

rotateX()
rotateY()
rotateZ()

transform: rotateY(180deg);

/* 是否顯示元素的背面 */
backface-visibility: hidden;

縮放

變形的原點(diǎn) 默認(rèn)值 center
修改原點(diǎn)

transform-origin:20px 20px;

對(duì)元素進(jìn)行縮放的函數(shù)：

scaleX() 水平方向縮放
scaleY() 垂直方向縮放
scale() 雙方向的縮放

transform:scale(2)

背景顏色

background-color 設(shè)置背景顏色

background-color: #bfa;

背景圖片

background-image 設(shè)置背景圖片

可以同時(shí)設(shè)置背景圖片和背景顏色，這樣背景顏色將會(huì)成為圖片的背景色
如果背景的圖片小于元素，則背景圖片會(huì)自動(dòng)在元素中平鋪將元素鋪滿
如果背景的圖片大于元素，將會(huì)一個(gè)部分背景無法完全顯示
如果背景圖片和元素一樣大，則會(huì)直接正常顯示

background-image: url("./img/1.png");

背景重復(fù)方式

background-position 用來設(shè)置背景圖片的位置

通過 top left right bottom center 幾個(gè)表示方位的詞來設(shè)置背景圖片的位置
使用方位詞時(shí)必須要同時(shí)指定兩個(gè)值，如果只寫一個(gè)則第二個(gè)默認(rèn)就是center
通過偏移量來指定背景圖片的位置：水平方向的偏移量垂直方向變量
設(shè)置方式：

background-position: center;

background-position: -50px 300px;

背景范圍

background-clip

border-box 默認(rèn)值，背景會(huì)出現(xiàn)在邊框的下邊
padding-box 背景不會(huì)出現(xiàn)在邊框，只出現(xiàn)在內(nèi)容區(qū)和內(nèi)邊距
content-box 背景只會(huì)出現(xiàn)在內(nèi)容區(qū)
可選值：

background-origin 背景圖片的偏移量計(jì)算的原點(diǎn)

padding-box 默認(rèn)值，background-position從內(nèi)邊距處開始計(jì)算
content-box 背景圖片的偏移量從內(nèi)容區(qū)處計(jì)算
border-box 背景圖片的變量從邊框處開始計(jì)算

background-origin: border-box;
           background-clip: content-box;

背景圖片大小

background-size 設(shè)置背景圖片的大小

第一個(gè)值表示寬度
第二個(gè)值表示高度
- 如果只寫一個(gè)，則第二個(gè)值默認(rèn)是 auto

cover 圖片的比例不變，將元素鋪滿
contain 圖片比例不變，將圖片在元素中完整顯示

background-size: contain;

背景圖片是否隨元素移動(dòng)

background-attachment背景圖片是否跟隨元素移動(dòng)

scroll 默認(rèn)值背景圖片會(huì)跟隨元素移動(dòng)
fixed 背景會(huì)固定在頁(yè)面中，不會(huì)隨元素移動(dòng)
可選值：

注意

backgound 背景相關(guān)的簡(jiǎn)寫屬性，所有背景相關(guān)的樣式都可以通過該樣式來設(shè)置
并且該樣式?jīng)]有順序要求，也沒有哪個(gè)屬性是必須寫的
background-size必須寫在background-position的后邊，并且使用/隔開 background-position/background-size
background-origin background-clip 兩個(gè)樣式，orgin要在clip的前邊

SS3的transform屬性可以縮放、傾斜和旋轉(zhuǎn)任何元素。在沒有任何瀏覽器前綴的前提下，這個(gè)屬性已經(jīng)被所有的現(xiàn)代瀏覽器所支持。如果想支持黑莓瀏覽器和安卓版的UC瀏覽器，你就需要添加-webkit-前綴了。

#myelement{
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
}

完美！然而，當(dāng)你使用上述代碼時(shí)，你會(huì)發(fā)現(xiàn)元素的內(nèi)容、邊框、背景圖片都會(huì)發(fā)生旋轉(zhuǎn)。那么，怎樣才能只旋轉(zhuǎn)背景圖片呢？怎樣才能只讓元素本身旋轉(zhuǎn)，而讓其背景圖片位置固定呢？

目前，W3C還沒有專門變形背景圖片的屬性。我相信在不久的將來肯定會(huì)出現(xiàn)這個(gè)非常實(shí)用的屬性。但是對(duì)于現(xiàn)在想實(shí)現(xiàn)相同效果的開發(fā)者們來說毫無幫助。

萬幸，這里有個(gè)解決方法。其實(shí)，就是一個(gè)給父級(jí)容器元素before偽元素或者after偽元素添加背景圖片的hack。這時(shí)，我們就可以獨(dú)立控制帶有背景圖片偽元素的變形。

只變形背景

為了控制偽元素在其父級(jí)容器內(nèi)定位，其父級(jí)容器元素必須設(shè)置相對(duì)定位(position:relative)。為了防止背景溢出，你也需要給容器元素設(shè)置overflow:hidden;

#myelement{
 position:relative;
 overflow:hidden;
}

現(xiàn)在，我們來創(chuàng)建一個(gè)具有可以變形背景的絕對(duì)定位的偽元素。將偽元素的層級(jí)設(shè)置為-1(z-index:-1),保證其不遮蓋內(nèi)容。

#myelement:before{
 content:'';
 position:absolute;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 z-index:-1;
 background:url(background.png) 0 0 repeate;
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
}

注意，你需要調(diào)整偽元素的寬度、高度和定位。比如，當(dāng)你使用重復(fù)圖片做背景時(shí)，旋轉(zhuǎn)的區(qū)域必須比其所在容器面積大，以此保證全部覆蓋容器背景。

固定一個(gè)變形元素的背景

父級(jí)容器上的所有變形樣式都會(huì)繼承到其偽元素。因此，我們需要撤銷其偽元素的變形樣式。例如，如果容器旋轉(zhuǎn)30deg，其偽元素背景必須旋轉(zhuǎn)-30deg，這樣背景才能固定到某個(gè)位置。

#myelement{
 position:relative;
 overflow:hidden;
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
 }
 #myelement:before{
 content:'';
 position:absolute;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 z-index:-1;
 background:url(background.png) 0 0 repeat;
 -webkit-transform:rotate(-30deg);
 transform:rotate(-30deg);
}

當(dāng)然，你仍然需要調(diào)整偽元素背景的尺寸和位置，使其完全覆蓋父級(jí)容器。

下面是CodePen上的相關(guān)實(shí)例：

https://codepen.io/SitePoint/pen/Ngpvwx

這種方法支持所有標(biāo)準(zhǔn)瀏覽器、edge、IE9~IE11。在IE8中不會(huì)有任何變形樣式，但是背景圖仍然顯示。

IE6和IE7不支持偽元素，因此背景圖不會(huì)顯示。然而，為了支持那些古老的瀏覽器，你可以直接給容器設(shè)置背景圖而不是用先進(jìn)的選擇器或者一定條件的CSS將容器的背景設(shè)置為空。

大量創(chuàng)造性的應(yīng)用都用到了CSS3的變形屬性。您有相關(guān)分享嗎？

本文由大前端學(xué)堂編譯出品，原文來自sitepoint，作者Craig Buckler，若轉(zhuǎn)載請(qǐng)注明出處，轉(zhuǎn)發(fā)感激不盡。

ransform

使用 transform 控制元素的變形，包括控制移動(dòng)、旋轉(zhuǎn)、傾斜、3D轉(zhuǎn)換等。
下面是CSS提供的變形動(dòng)作。

translateX 和 translateY 可以使用負(fù)數(shù)和百分?jǐn)?shù)
translateZ 表示縱深，只能寫具體的數(shù)值
小技巧控制元素居中

position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;

rotate3d 按向量值控制旋轉(zhuǎn)
transform 的參數(shù)疊加與順序?qū)ψ冃斡胁煌慕Y(jié)果參數(shù)不會(huì)疊加，只會(huì)發(fā)生覆蓋順序的不同，結(jié)果呈現(xiàn)也不同

transform-origin

變形參考點(diǎn)，設(shè)置元素的 X/YZ 操作的基點(diǎn)，用于控制旋轉(zhuǎn)、傾斜等操作

旋轉(zhuǎn)默認(rèn)以元素中心進(jìn)行旋轉(zhuǎn)，改變基點(diǎn)后可控制旋轉(zhuǎn)點(diǎn)位置
元素移動(dòng)不受變形基點(diǎn)所影響

屬性值為：top、bottom、left、right、center 或者是百分?jǐn)?shù) | 具體數(shù)值
默認(rèn)值: center center

transform-origin: left center 300px;

perspective

控制元素的透視深度

perspective(900px) 作為函數(shù)規(guī)則控制單個(gè)元素，每個(gè)元素的透視效果是一樣的
perspective: 900px 作為規(guī)則用于將父級(jí)整個(gè)做為透視元素，會(huì)造成里面的每個(gè)子元素的透視是不一樣的。就像現(xiàn)實(shí)中擺一排杯子，是使用統(tǒng)一透視的，每個(gè)杯子的透視不一樣，造成有大有小

推薦設(shè)置作為函數(shù)設(shè)置，規(guī)避透視造成元素大小不一致：transform: perspective(600px);

preserve-3d

三維空間視角，對(duì)元素設(shè)置 Z軸效果時(shí)需要呈現(xiàn)三維空間效果

transform-style: preserve-3d;

perspective-origin

控制視線的角度，就像我們眼睛看物體時(shí)的聚焦點(diǎn)
需要設(shè)置 perspective 規(guī)則才能看到效果

backface-visibility

控制是否可以看到元素的背面

一般設(shè)置在元素上而不是父級(jí)元素上
需要父級(jí)元素設(shè)置 transform-style: preserve-3d

可選屬性：

visible 背面可見
hidden 背面隱藏

一些常見的案例

立體按鈕

3D 視圖切換

背面卡片

輸入框特效

賀卡效果

按鈕效果

立方體翻轉(zhuǎn)

在線咨詢

上一篇：Sublime Text3中文語(yǔ)言漢化包-電腦軟件漢
下一篇：這里有一份HTML的超全教程，自學(xué)建網(wǎng)站不再是夢(mèng)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商