CSS3動畫，變形及背景操作

畫

animation-name: 要對當前元素生效的關鍵幀的名字

animation-name: test;

animation-duration: 動畫的執行時間

animation-duration: 4s;

animation-delay:動畫的延時

animation-delay: 2s;

nimation-iteration-count 動畫執行的次數可選值：

次數
infinite 無限執行

animation-iteration-count: 1;

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

normal 默認值從 from 向 to運行每次都是這樣
reverse 從 to 向 from 運行每次都是這樣
alternate 從 from 向 to運行重復執行動畫時反向執行
alternate-reverse 從 to 向 from運行重復執行動畫時反向執行

animation-direction: alternate-reverse;

animation-play-state: 設置動畫的執行狀態可選值：

running 默認值動畫執行
paused 動畫暫停

animation-play-state: paused;

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

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

animation-fill-mode: both;

混合使用

animation: test 2s 2 1s alternate;

實現動畫

動畫和過渡類似，都是可以實現一些動態的效果，
不同的是過渡需要在某個屬性發生變化時才會觸發
動畫可以自動觸發動態效果
設置動畫效果，必須先要設置一個關鍵幀，關鍵幀設置了動畫執行每一個步驟

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

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

變形transform

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

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

transform: translateY(-100px);

Z軸平移

設置視距

perspective: 800px;

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

transform: translateZ(800px);

旋轉

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

rotateX()
rotateY()
rotateZ()

transform: rotateY(180deg);

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

縮放

變形的原點默認值 center
修改原點

transform-origin:20px 20px;

對元素進行縮放的函數：

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

transform:scale(2)

背景顏色

background-color 設置背景顏色

background-color: #bfa;

背景圖片

background-image 設置背景圖片

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

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

背景重復方式

background-position 用來設置背景圖片的位置

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

background-position: center;

background-position: -50px 300px;

背景范圍

background-clip

border-box 默認值，背景會出現在邊框的下邊
padding-box 背景不會出現在邊框，只出現在內容區和內邊距
content-box 背景只會出現在內容區
可選值：

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

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

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

背景圖片大小

background-size 設置背景圖片的大小

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

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

background-size: contain;

背景圖片是否隨元素移動

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

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

注意

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

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

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

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

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

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

只變形背景

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

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

現在，我們來創建一個具有可以變形背景的絕對定位的偽元素。將偽元素的層級設置為-1(z-index:-1),保證其不遮蓋內容。

#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);
}

注意，你需要調整偽元素的寬度、高度和定位。比如，當你使用重復圖片做背景時，旋轉的區域必須比其所在容器面積大，以此保證全部覆蓋容器背景。

固定一個變形元素的背景

父級容器上的所有變形樣式都會繼承到其偽元素。因此，我們需要撤銷其偽元素的變形樣式。例如，如果容器旋轉30deg，其偽元素背景必須旋轉-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);
}

當然，你仍然需要調整偽元素背景的尺寸和位置，使其完全覆蓋父級容器。

下面是CodePen上的相關實例：

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

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

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

大量創造性的應用都用到了CSS3的變形屬性。您有相關分享嗎？

本文由大前端學堂編譯出品，原文來自sitepoint，作者Craig Buckler，若轉載請注明出處，轉發感激不盡。

ransform

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

translateX 和 translateY 可以使用負數和百分數
translateZ 表示縱深，只能寫具體的數值
小技巧控制元素居中

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

rotate3d 按向量值控制旋轉
transform 的參數疊加與順序對變形有不同的結果參數不會疊加，只會發生覆蓋順序的不同，結果呈現也不同

transform-origin

變形參考點，設置元素的 X/YZ 操作的基點，用于控制旋轉、傾斜等操作

旋轉默認以元素中心進行旋轉，改變基點后可控制旋轉點位置
元素移動不受變形基點所影響

屬性值為：top、bottom、left、right、center 或者是百分數 | 具體數值
默認值: center center

transform-origin: left center 300px;

perspective

控制元素的透視深度

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

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

preserve-3d

三維空間視角，對元素設置 Z軸效果時需要呈現三維空間效果

transform-style: preserve-3d;

perspective-origin

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

backface-visibility

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

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

可選屬性：

visible 背面可見
hidden 背面隱藏

一些常見的案例

立體按鈕

3D 視圖切換

背面卡片

輸入框特效

賀卡效果

按鈕效果

立方體翻轉

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商