?

詳細(xì)內(nèi)容請(qǐng)點(diǎn)擊

?

?
?

在線預(yù)覽立即下載

?

這是一組共9款CSS3炫酷圖片預(yù)覽展示動(dòng)畫(huà)特效插件。css的新特性可以讓我們制作出各種炫酷的動(dòng)畫(huà)效果。該圖片預(yù)覽展示動(dòng)畫(huà)特效就是一個(gè)很好的例子，該效果開(kāi)始時(shí)圖片堆疊在一起，當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)，圖片會(huì)以9種不同的方式展開(kāi)，有扇形、平面展開(kāi)等等非?？岬男Ч?br>
html:

下面來(lái)看看這個(gè)圖片預(yù)覽展示動(dòng)畫(huà)特效的HTML結(jié)構(gòu)。整個(gè)結(jié)構(gòu)使用一個(gè)div.albums作為包裝容器。它的寬度被設(shè)置為1100像素。
div

class
=
"albums"
>
div
>

在.albums中有9個(gè).albums-tab，分別用于制作9種圖片展開(kāi)效果。在它里面有兩個(gè)元素：.albums-tab-thumb和.albums-tab-text，分別是用于放置圖片和圖片的標(biāo)題。
1
2
3
4
5
6
7
8
9
10
11
12
div

class
=
"albums-tab"
>

div

class
=
"albums-tab-thumb sim-anim-1"
>

img

src
=
"_assets/studio_0001.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0002.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0003.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0004.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0005.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0006.jpg"

class
=
"all studio"
/>

img

src
=
"_assets/studio_0001.jpg"

class
=
"all studio"
/>


div
>

div

class
=
"albums-tab-text"
>.sim-anim-1 span
>(7 pictures)
span
>
div
>

div
>

css:

這個(gè)圖片預(yù)覽展示動(dòng)畫(huà)特效有兩個(gè)主要的樣式表：main.css和sim-prev-anim.css。main.css用于一些通用樣式，sim-prev-anim.css包含了9種圖片預(yù)覽展示動(dòng)畫(huà)特效的CSS代碼。為了制作動(dòng)畫(huà)效果，.albums-tab-thumb元素要設(shè)置一個(gè)合適的寬度，記住最終設(shè)置的寬度要比這個(gè)寬度大10像素，因?yàn)橐獮槊恳环鶊D設(shè)置5像素的padding。
1
2
3
4
.albums-tab-thumb{

float
:
left
;

width
:
300px
;
}

接下來(lái)要設(shè)置.albums-tab-thumb里面的所有圖片的寬度為它的寬度-10px（5px的padding），并將背景色設(shè)置為白色。
1
2
3
4
5
6
.albums-tab-thumb img {

height
:
auto
;

width
:
290px
;

background-color
: rgba(
255
,
255
,
255
,
1
);

padding
:
5px
;
}

接下來(lái)來(lái)看看第一種效果的制作方法。第一種圖片預(yù)覽動(dòng)畫(huà)特效的class為.sim-anim-1。這個(gè)動(dòng)畫(huà)效果需要7張圖片，.sim-anim-1的定位方式為相對(duì)定位，它里面的圖片的定位方式為絕對(duì)定位方式。為圖片設(shè)置0.5s的transition，當(dāng)鼠標(biāo)滑過(guò).sim-anim-1元素，它里面的圖片的z-index被設(shè)置為1，這樣在它們執(zhí)行動(dòng)畫(huà)的時(shí)候，都會(huì)顯示在其它圖片的上面。
1
2
3
4
5
6
7
8
9
10
11
12
13
.sim-anim
-1
{

position
:
relative
;
}
.sim-anim
-1

img{

position
:
absolute
;

-webkit-
transition
:
all

0.5
s;

-moz-
transition
:
all

0.5
s;

-o-
transition
:
all

0.5
s;

transition
:
all

0.5
s;
}
.sim-anim
-1:
hover img{

z-index
:
1
;
}

為了制作第一種圖片展示效果，第一幅圖片要旋轉(zhuǎn)10度，第二幅圖片旋轉(zhuǎn)-10度，這樣每隔一幅圖片就會(huì)產(chǎn)生相反的方向。接下來(lái)第三幅圖片旋轉(zhuǎn)20度，第四幅圖片旋轉(zhuǎn)-20度，第五和第六幅圖片將旋轉(zhuǎn)30度和-30度。最后一幅圖片的大小被縮放為原圖片的90%。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.sim-anim
-1:
hover img:nth-child(
1
){

-ms-
transform
:
rotate
(
10
deg);

-webkit-
transform
:
rotate
(
10
deg);

transform
:
rotate
(
10
deg);
}
.sim-anim
-1:
hover img:nth-child(
2
){

-ms-
transform
:
rotate
(
-10
deg);

-webkit-
transform
:
rotate
(
-10
deg);

transform
:
rotate
(
-10
deg);
}
.sim-anim
-1:
hover img:nth-child(
3
){

-ms-
transform
:
rotate
(
20
deg);

-webkit-
transform
:
rotate
(
20
deg);

transform
:
rotate
(
20
deg);}
.sim-anim
-1:
hover img:nth-child(
4
){

-ms-
transform
:
rotate
(
-20
deg);

-webkit-
transform
:
rotate
(
-20
deg);

transform
:
rotate
(
-20
deg);
}
.sim-anim
-1:
hover img:nth-child(
5
){

-ms-
transform
:
rotate
(
30
deg);

-webkit-
transform
:
rotate
(
30
deg);

transform
:
rotate
(
30
deg);
}
.sim-anim
-1:
hover img:nth-child(
6
){

-ms-
transform
:
rotate
(
-30
deg);

-webkit-
transform
:
rotate
(
-30
deg);

transform
:
rotate
(
-30
deg);
}
.sim-anim
-1:
hover img:nth-child(
7
){

-ms-
transform
:
scale
(
0.9
,
0.9
);

-webkit-
transform
:
scale
(
0.9
,
0.9
);

transform
:
scale
(
0.9
,
0.9
);
}

如何在自己的項(xiàng)目上使用這IE圖片展示效果？

如果你想將這9中圖片預(yù)覽展示特效中的一種用于你的項(xiàng)目上，你需要引入sim-prev-anim.css文件，然后為你的圖片包裹容器設(shè)置合適的名稱，如果名稱與sim-prev-anim.css中的名稱不同，需要修改css文件，然后添加合適數(shù)量的圖片，和選擇一種你需要的動(dòng)畫(huà)效果的class名稱添加到albums-tab-thumb元素上。
注意：每種效果的圖片數(shù)量是固定的，數(shù)量不對(duì)顯示出來(lái)的效果會(huì)不太美觀。
轉(zhuǎn)載自：http://www.htmleaf.com/css3/css3donghua/201503071476.html

?

更多html5內(nèi)容請(qǐng)點(diǎn)擊

?