CSS3動畫，變形及背景操作

畫

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

animation-name: test;

animation-duration: 動畫的執(zhí)行時間

animation-duration: 4s;

animation-delay:動畫的延時

animation-delay: 2s;

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

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

animation-iteration-count: 1;

animation-direction 指定動畫運行的方向可選值：

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

animation-direction: alternate-reverse;

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

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

animation-play-state: paused;

animation-fill-mode: 動畫的填充模式可選值：

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

animation-fill-mode: both;

混合使用

animation: test 2s 2 1s alternate;

實現(xiàn)動畫

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

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

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

變形transform

變形就是指通過CSS來改變元素的形狀或位置
變形不會影響到頁面的布局
transform 用來設(shè)置元素的變形效果

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

transform: translateY(-100px);

Z軸平移

設(shè)置視距

perspective: 800px;

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

transform: translateZ(800px);

旋轉(zhuǎn)

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

rotateX()
rotateY()
rotateZ()

transform: rotateY(180deg);

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

縮放

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

transform-origin:20px 20px;

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

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

transform:scale(2)

背景顏色

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

background-color: #bfa;

背景圖片

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

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

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

背景重復(fù)方式

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

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

background-position: center;

background-position: -50px 300px;

背景范圍

background-clip

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

background-origin 背景圖片的偏移量計算的原點

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

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

背景圖片大小

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

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

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

background-size: contain;

背景圖片是否隨元素移動

background-attachment背景圖片是否跟隨元素移動

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

注意

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

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

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

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

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

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

只變形背景

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

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

現(xiàn)在，我們來創(chuàng)建一個具有可以變形背景的絕對定位的偽元素。將偽元素的層級設(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ù)圖片做背景時，旋轉(zhuǎn)的區(qū)域必須比其所在容器面積大，以此保證全部覆蓋容器背景。

固定一個變形元素的背景

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

#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)整偽元素背景的尺寸和位置，使其完全覆蓋父級容器。

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

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

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

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

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

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

ransform

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

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ù)不會疊加，只會發(fā)生覆蓋順序的不同，結(jié)果呈現(xiàn)也不同

transform-origin

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

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

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

transform-origin: left center 300px;

perspective

控制元素的透視深度

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

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

preserve-3d

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

transform-style: preserve-3d;

perspective-origin

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

backface-visibility

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

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

可選屬性：

visible 背面可見
hidden 背面隱藏

一些常見的案例

立體按鈕

3D 視圖切換

背面卡片

輸入框特效

賀卡效果

按鈕效果

立方體翻轉(zhuǎn)

在線咨詢

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

您的項目需求

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

整合營銷服務(wù)商

CSS3動畫，變形及背景操作

畫