Home >Web Front-end >HTML Tutorial >9 kinds of cool CSS3 pictures to expand preview and display animated special effects_html/css_WEB-ITnose

9 kinds of cool CSS3 pictures to expand preview and display animated special effects_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:46:211753browse

For details, please click


Preview online and download now

This is a set of 9 CSS3 cool image preview display animation special effects plug-ins. The new features of css allow us to create a variety of cool animation effects. This picture preview shows the animation effect as a good example. The effect starts with pictures stacked on top of each other. When the mouse slides over the picture, the picture will expand in 9 different ways, including fan shape, flat expansion and other very cool effects. .

html:

Let’s take a look at the HTML structure of this image preview showing animated special effects. The entire structure uses a div.albums as a wrapping container. Its width is set to 1100 pixels.
<
div

class
=
"albums"
>div
>


There are 9 .albums-tabs in .albums, which are used to create 9 kinds of image expansion effects. There are two elements in it: .albums-tab-thumb and .albums-tab-text, which are used to place pictures and picture titles respectively.
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:

This image preview shows that animation effects have two main style sheets: main.css and sim-prev-anim.css. main.css is used for some common styles, and sim-prev-anim.css contains 9 CSS codes for image preview display animation effects. In order to create animation effects, the .albums-tab-thumb element must be set to an appropriate width. Remember that the final width set is 10 pixels larger than this width because a 5-pixel padding is set for each image.
1
2
3
4
.albums-tab-thumb{

float
:
left
;

width
:
300px
;
}

Next, set the width of all images in .albums-tab-thumb to its width-10px (5px padding ) and set the background color to white.
1
2
3
4
5
6
.albums-tab-thumb img {

height
:
auto
;

width
:
290px
;

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

padding
:
5px
;
}

Next, let’s take a look at how to create the first effect. The class of the first image preview animation special effect is .sim-anim-1. This animation effect requires 7 pictures. The positioning method of .sim-anim-1 is relative positioning, and the positioning method of the pictures inside it is absolute positioning. Set a 0.5s transition for the image. When the mouse slides over the .sim-anim-1 element, the z-index of the image inside it is set to 1, so that when they perform animation, they will be displayed on top of other images.
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
;
}

In order to create the first picture display effect, the first picture should be rotated 10 degrees, and the second picture should be rotated -10 degrees, so that every other picture will have the opposite direction. Next, the third image will be rotated 20 degrees, the fourth image will be rotated -20 degrees, and the fifth and sixth images will be rotated 30 degrees and -30 degrees. The size of the last image is scaled to 90% of the original image.
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
);
}


How to use this IE image display effect in your own project?

If you want to use one of these 9 image preview display effects for your project, you need to import the sim-prev-anim.css file, and then set the appropriate Name, if the name is different from the name in sim-prev-anim.css, you need to modify the css file, then add an appropriate number of images, and select a class name of the animation effect you need to add to the albums-tab-thumb element .
Note: The number of pictures for each effect is fixed. If the number is incorrect, the displayed effect will be unsightly.
Reprinted from: http://www.htmleaf.com/css3/css3donghua/201503071476.html

For more html5 content, please click

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn