9 kinds of CSS3 cool pictures show preview animation effects, css3 cool

9 kinds of CSS3 cool pictures show preview animation effects, css3 cool

 

For details, click

 

 
 

Online Preview download now

 

This is a group of nine special effects plug-ins for previewing and displaying CSS 3 cool images. The new css features allow us to make various cool animations. This is a good example of previewing and displaying animated effects. The effects are stacked together at the beginning. When the mouse slides over the image, the image is displayed in nine different ways, slice, flat, and so on.

Html:

Next, let's take a look at the HTML structure of the animation effect preview. The entire structure uses a div. albums as the packaging 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 types of image expansion effects respectively. There are two elements in it:. albums-tab-thumb and. albums-tab-text, which are the titles used to place images and images 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:

There are two main style sheets for previewing and displaying animation effects: main.css and sim-prev-anim.css. Main.cssis used in some common examples. sim-prev-anim.css contains 9 types of CSS code for previewing and displaying animation effects. To make the animation effect ,. set a proper width for the albums-tab-thumb element, and remember that the final width is 10 pixels larger than the width, because a 5-pixel padding is required for each graph.
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 Picture preview animation effect is. sim-anim-1. This animation needs 7 pictures,. sim-anim-1 Positioning Method for relative positioning, it inside the Image Positioning Method for absolute positioning. Set the 0.5s transition for the image when the mouse slides over. the sim-anim-1 element in which the z-index of the image is set to 1 so that it will be displayed on top of other images when they are animated.
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 make the first image display effect, the first image must be rotated for 10 degrees, and the second image must be rotated for 10 degrees, so that every other image will have the opposite direction. Next, the third image is rotated 20 degrees, and the fourth image is rotated-20 degrees. The fifth and sixth images are rotated 30 degrees and-30 degrees. The size of the last image is scaled to 90% of that 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 can I use this IE image to demonstrate the effect on my project?

The name of the class is different. You need to modify the css file, add a suitable number of images, and select a class name for the animation effect you need to add it to the albums-tab-thumb element.
Note: The number of images for each effect is fixed, and the results displayed when the number is incorrect may not be quite attractive.
Reprinted from: http://www.htmleaf.com/css3/css3donghua/201503071476.html

 

For more html5 content, click