這是一組共9款CSS3炫酷圖片預覽展示動畫特效插件。css的新特性可以讓我們制作出各種炫酷的動畫效果。該圖片預覽展示動畫特效就是一個很好的例子，該效果開始時圖片堆疊在一起，當鼠標滑過圖片時，圖片會以9種不同的方式展開，有扇形、平面展開等等非常酷的效果。
html:
下面來看看這個圖片預覽展示動畫特效的HTML結構。整個結構使用一個div.albums作為包裝容器。它的寬度被設置為1100像素。
<
div
class
=
"albums"
></
div
>
在.albums中有9個.albums-tab，分別用於制作9種圖片展開效果。在它里面有兩個元素：.albums-tab-thumb和.albums-tab-text，分別是用於放置圖片和圖片的標題。
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:
這個圖片預覽展示動畫特效有兩個主要的樣式表：main.css和sim-prev-anim.css。main.css用於一些通用樣式，sim-prev-anim.css包含了9種圖片預覽展示動畫特效的CSS代碼。為了制作動畫效果，.albums-tab-thumb元素要設置一個合適的寬度，記住最終設置的寬度要比這個寬度大10像素，因為要為每一幅圖設置5像素的padding。
1
2
3
4
.albums-tab-thumb{
float
:
left
;
width
:
300px
;
}
接下來要設置.albums-tab-thumb里面的所有圖片的寬度為它的寬度-10px（5px的padding），並將背景色設置為白色。
1
2
3
4
5
6
.albums-tab-thumb img {
height
:
auto
;
width
:
290px
;
background-color
: rgba(
255
,
255
,
255
,
1
);
padding
:
5px
;
}
接下來來看看第一種效果的制作方法。第一種圖片預覽動畫特效的class為.sim-anim-1。這個動畫效果需要7張圖片，.sim-anim-1的定位方式為相對定位，它里面的圖片的定位方式為絕對定位方式。為圖片設置0.5s的transition，當鼠標滑過.sim-anim-1元素，它里面的圖片的z-index被設置為1，這樣在它們執行動畫的時候，都會顯示在其它圖片的上面。
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
;
}
為了制作第一種圖片展示效果，第一幅圖片要旋轉10度，第二幅圖片旋轉-10度，這樣每隔一幅圖片就會產生相反的方向。接下來第三幅圖片旋轉20度，第四幅圖片旋轉-20度，第五和第六幅圖片將旋轉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
);
}
如何在自己的項目上使用這IE圖片展示效果？
如果你想將這9中圖片預覽展示特效中的一種用於你的項目上，你需要引入sim-prev-anim.css文件，然后為你的圖片包裹容器設置合適的名稱，如果名稱與sim-prev-anim.css中的名稱不同，需要修改css文件，然后添加合適數量的圖片，和選擇一種你需要的動畫效果的class名稱添加到albums-tab-thumb元素上。
注意：每種效果的圖片數量是固定的，數量不對顯示出來的效果會不太美觀。
轉載自：http://www.htmleaf.com/css3/css3donghua/201503071476.html