柚子快報(bào)激活碼778899分享：前端 CSS3的一些動畫展示

http://yzkb.51969.com/

????????在css3中，有一些特別方便有趣的方式來讓自己定義的圖形和圖片‘活’起來。

前言

????????1.? 了解‘過渡’? ?2D轉(zhuǎn)換

????????2.? 案例

1. 1 過渡(transition)

用法與參數(shù)：Transition：（參數(shù)一? ?參數(shù)二）

參數(shù)一：要過渡的屬性?參數(shù)二：過渡的時間

????????過渡是css3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過渡（補(bǔ)間動畫），經(jīng)常用來制作動畫效果。

?補(bǔ)間動畫：自動完成從始至終的狀態(tài)的過渡，不用管中間的狀態(tài)。幀動畫：撲克牌切換，通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片。

1.2 2D轉(zhuǎn)換

2D轉(zhuǎn)換可以實(shí)現(xiàn)原色的位移，旋轉(zhuǎn)，變形，縮放，甚至支持矩陣方式，配合即將學(xué)習(xí)的動畫知識，可以取代大量之前只能靠flash才可以實(shí)現(xiàn)的效果。在css3中，可以通過transform（變形）來實(shí)現(xiàn)2d或者3d的轉(zhuǎn)換，其中2d中有縮放移動，旋轉(zhuǎn)。

1.2.1縮放

用法與參數(shù)：scale（x，y）

????????可以對元素進(jìn)行水平和垂直方式的縮放，x，y的取值可以為小數(shù)，不可為負(fù)數(shù)。

1.2.2移動

用法和參數(shù)：translate（x，y）? ? ? ?

?????????x為水平方向移動，y為垂直方向移動

????????可以以改變元素的位置，x，y可以為負(fù)數(shù)。

1.2.3旋轉(zhuǎn)

用法與參數(shù)：rotate（deg）

可以對元素驚醒旋轉(zhuǎn)，正值為順時針，負(fù)值為逆時針

1.2.4改變圓心

transform-origin：（方位）如：top? 配合旋轉(zhuǎn) 可改變圖形圓心位置旋轉(zhuǎn)方式。

2?案例

????????2.1氣泡案例

當(dāng)鼠標(biāo)移入在這個氣泡上，會實(shí)現(xiàn)絲滑氣泡動態(tài)效果的動畫

2.1.1

首先在body里定義一個div，并命名類為box。在style中開始編寫css樣式?實(shí)現(xiàn)動態(tài)效果。如下

.box {

width: 300px;

height: 150px;

margin: 100px auto;

border-radius: 20px;

background: url(./images/paopao.png) no-repeat,

url(./images/paopao.png) no-repeat right bottom;

background-color: skyblue;

transition: all 2s;

}

2.1.2

設(shè)置?.box?元素的寬度為 300 像素高度為 150 像素。

? ? ? ?width: 300px;height: 150px;

2.1.3

設(shè)置?.box?元素的外邊距，上下各 100 像素，左右自動（使其水平居中）。

????????margin: 100px auto;

2.1.4

設(shè)置元素的邊角為 20 像素的圓角，使其看起來更加柔和。

????????border-radius: 20px;

2.1.5

設(shè)置了兩個背景圖像：

????????background:

? ? ? ? ? ? ?url(./images/paopao.png) no-repeat,

? ? ? ? ? ? ?url(./images/paopao.png) no-repeat right bottom;：

??????第二個背景圖片位置設(shè)置在右下角（right bottom）。實(shí)現(xiàn)同一張圖片，不同的動畫效果

2.1.6

設(shè)置所有可過渡屬性的變化時間為 2 秒，意味著在狀態(tài)變化時（如鼠標(biāo)懸停）會平滑過渡。

????????transition: all 2s;

2.1.7

偽類選擇器，用于定義當(dāng)鼠標(biāo)懸停在?.box?元素上時的樣式。

????????.box:hover

2.1.9

當(dāng)鼠標(biāo)懸停時，第一個背景圖像的位置變化為左下角（left bottom）。

第二個背景圖像的位置變化為右上角（right top）。

????????background-position: left bottom, right top;

效果總結(jié)

當(dāng)用戶將鼠標(biāo)懸停在類為?.box?元素的泡泡背景上時，背景圖像的位置會發(fā)生變化，并且這種變化會在 2 秒內(nèi)平滑過渡。背景圖像在鼠標(biāo)懸停時移動，給人一種動態(tài)的視覺體驗(yàn)。十分絲滑，且簡單。

2.2火箭移動

? ? ? ? 當(dāng)鼠標(biāo)移動到頁面上（body），自左下向右上出來一個小火箭。

body{

height: 100%;

background-color: #60cac7;

}

html{

height: 100%;

}

.img{

position: absolute;

bottom: 0px;

left: 0px;

width: 50px;

transform: translate(-81px,100px) rotate(10deg);

transition: all 2s;

}

body:hover img{

transform: translate(500px,-500px) rotate(45deg);

}

2.2.1

html?和?body?的高度為百分百。這兩行代碼確保網(wǎng)頁的高度占滿整個瀏覽器窗口。方便我們鼠標(biāo)移入時動畫能觸發(fā)。

????????body { height: 100%;

???????? ????????background-color: #60cac7; }

????????html { height: 100%; }

2.2.2

.img?類的樣式設(shè)置 ??????.img{ ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? bottom: 0px; ? ? ? ? ? ? left: 0px; ? ? ? ? ? ? width: 50px; ? ? ? ? ? ? transform: ?translate(-81px,100px) rotate(10deg); ? ? ? ? ? ? transition: all 2s; ? ? ? ? }

2.2.3

將該元素的定位方式設(shè)置為絕對定位。

? ??position: absolute; ? ? ? ? ? ? ?bottom: 0px; ? ? ? ? ? ? ?left: 0px;

2.2.4

使用?transform屬性對元素進(jìn)行變換：

???????????????transform: ?translate(-81px,100px) rotate(10deg);

2.2.5

將元素在水平方向上向左移動 81 像素，在垂直方向上向下移動 100 像素。將元素順時針旋轉(zhuǎn) 10 度。

????????????????transform：?translate(-81px,100px) rotate(10deg)；

2.2.6

設(shè)置所有可過渡的屬性在變化時的持續(xù)時間為 2 秒。這意味著當(dāng)元素的樣式發(fā)生變化時，變化會平滑地過渡。

????????????????transition：?all 2s；

2.2.7

body:hover img?的樣式設(shè)置

當(dāng)鼠標(biāo)懸停在?body?元素上時，選擇所有?img?元素

????????????????body:hover img{ ????????????????????????}

當(dāng)鼠標(biāo)懸停時，元素的變換會更新為：

translate(500px,-500px)；將元素在水平方向上向右移動 500 像素，在垂直方向上向上移動 500 像素。將元素順時針旋轉(zhuǎn) 45 度。

????????????????transform: ?translate(500px,-500px) rotate(45deg)；

效果總結(jié)

????????這段代碼的總體效果是，我們將鼠標(biāo)懸停在頁面的任意位置時，位于左下角的小火煎會平滑地移動到右上角并旋轉(zhuǎn)30°，同時背景顏色保持不變。

2.3盾牌，位置還原

????????當(dāng)鼠標(biāo)移入這個頁面的時候，頁面上顯示的盾牌碎片將合體，成為一個完整的盾牌

??? ? ? ? ? ??

body{

background-color: #74c66d;

height: 100%;

}

html{

height:100% ;

}

div{

width: 430px;

height: 500px;

margin: 400px auto;

}

img:nth-child(1){

transform: translate(-45px,-45px);

transition: all 2s;

}

img:nth-child(2){

transform:translate(0px,-45px);

transition: all 2s;

}

img:nth-child(3){

transform:translate(45px,-45px);

transition: all 2s;

}

img:nth-child(4){

transform:translate(-45px,0px);

transition: all 2s;

}

img:nth-child(5){

transform:scale(1.5,1.5);

transition: all 2s;

}

img:nth-child(6){

transform:translate(45px,0px);

transition: all 2s;

}

img:nth-child(7){

transform:translate(-45px,45px);

transition: all 2s;

}

img:nth-child(8){

transform:translate(0px,45px);

transition: all 2s;

}

img:nth-child(9){

transform:translate(45px,45px);

transition: all 2s;

}

body:hover img {

transform: translate(0%,0%)

}

????????在body中我們插入盾牌碎片，集齊九個盾牌碎片即可召喚出世界上最強(qiáng)的刺不穿的盾。打敗巨龍，營救公主。所以我們我們這么寫代碼。

2.3.1

html?和?body?的高度為百分百。這兩行代碼確保網(wǎng)頁的高度占滿整個瀏覽器窗口。方便我們鼠標(biāo)移入時動畫能觸發(fā)。

????????body { height: 100%;

???????? ????????background-color: #60cac7; }

????????html { height: 100%; }

2.3.2

選擇?div?中的第一個?img?元素。nth-child(1)?是一個偽類選擇器，用于選擇父元素中的第一個子元素。對第一個?img?元素應(yīng)用變換；

????????????????img:nth-child(1) {

將該圖像在水平方向上向左移動 45 像素，在垂直方向上向上移動 45 像素。

????????????????transform：translate(-45px, -45px)；

設(shè)置所有可過渡的屬性在變化時的持續(xù)時間為 2 秒。

????????????????transition: all 2s；}

2.3.3

其余body中div的九個盾牌碎片img同理，只需要就改下偽類元素里的數(shù)字，再修改碎片的初始移動位置，再通過鼠標(biāo)移入的hover來讓盾牌碎片重新合體為一個完整的盾牌。就可以打敗巨龍。

????????body:hover img {

? ? ? ? ? ? ????????transform: translate(0%,0%)

? ? ? ? }

? ? ? ?To be continue......

柚子快報(bào)激活碼778899分享：前端 CSS3的一些動畫展示

http://yzkb.51969.com/

好文推薦