当前位置:Gxlcms > html代码 > 9种CSS3炫酷图片展开预览展示动画特效_html/css_WEB-ITnose

9种CSS3炫酷图片展开预览展示动画特效_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:67人阅读

详细内容请点击


在线预览立即下载

这是一组共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

更多html5内容请点击

人气教程排行