プレビューを展開してアニメーション特殊効果を表示するクールな CSS3 画像 9 種類_html/css_WEB-ITnose

詳細については、クリックしてください

今すぐオンライン プレビューをダウンロード

これは、CSS3 のクールな画像プレビュー表示アニメーション特殊効果プラグイン 9 個のセットです。 CSS の新しい機能を使用すると、さまざまなクールなアニメーション効果を作成できます。この画像プレビューは、アニメーション効果を良い例として示しています。この効果は、画像の上にマウスをスライドさせると、扇形、平らな展開など、9 つの異なる方法で展開されます。クールなエフェクト。

html:

アニメーションの特殊効果を示すこの画像プレビューの HTML 構造を見てみましょう。構造全体では、ラッピング コンテナとして div.albums を使用します。幅は 1100 ピクセルに設定されています。

1
2
3
4
5
6
7
89

10
11
12
div

class
=
"アルバムタブ"
>
ディビジョン

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

img

src
=
"_assets/studio_0001.jpg"

class
=
"すべてのスタジオ"


=
"_assets /studio_0003.jpg"

class
=
"すべてのスタジオ"
/>

img

src
=
"_assets/studio_0004.jpg"

クラス
=
"すべてのスタジオ"
/ >

img

src
=
"_assets/studio_0005.jpg"

class
=
"すべてのスタジオ"
/>

img

ソース
=
"_assets/studio_0006.jpg"

class
=
"すべてのスタジオ"
/>

img

src
=
"_assets/studio_0001.jpg"

class
=
」すべてのスタジオ"
/> ;


div
>

div

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

div
>


css:

この画像プレビューは、2 つの主要なスタイルシートを使用したアニメーション効果を示しています。 .css および sim-prev-anim.css。 main.css はいくつかの一般的なスタイルに使用され、sim-prev-anim.css には画像プレビュー表示アニメーション効果用の 9 つの CSS コードが含まれています。アニメーション効果を作成するには、.albums-tab-thumb 要素を適切な幅に設定する必要があります。各画像には 5 ピクセルのパディングが設定されているため、最終的な幅セットはこの幅より 10 ピクセル大きくなることに注意してください。 Albums-tab-tab-tab-tab-tab-tab-tab-tab-float
：
left
;画像の幅を -10px (パディング 5px) にし、背景色を白に設定します。
1
2
3
4
5
6
.albums-tab-thumb img {

高さ
:
自動
;

幅
:
290px
;

地色
: gba(

255

,
255
,
255
,
1
);

padding
:
5px

}

最初のエフェクトを作成する方法を見てみましょう。最初の画像プレビューアニメーション特殊効果のクラスは .sim-anim-1 です。このアニメーション効果には 7 枚のピクチャが必要です。sim-anim-1 の配置方法は相対配置であり、その中のピクチャの配置方法は絶対配置です。画像に 0.5 秒のトランジションを設定します。マウスが .sim-anim-1 要素上をスライドすると、その中の画像の z-index が 1 に設定され、アニメーションを実行するときにそれらが一番​​上に表示されます。他の画像の。
1
2
3
4
5

6

7
8
9
10
11
12
13
.sim-anim
-1
{

位置
:
相対
;
}
.sim -anim
-1

img{

position
:
absolute
;

-webkit-
transition
:
all

0.5
s;

-moz-

transition

:
すべて

0.5
s;

-o-
transition
:
all

0.5
s;

transition
:
all

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

z -インデックス
:
1
;
}

最初の画像の表示効果を作成するには、最初の画像を 10 度回転し、2 番目の画像を -10 度回転して、1 つおきの画像が逆方向になるようにします。次に、3 番目の画像は 20 度回転し、4 番目の画像は -20 度回転し、5 番目と 6 番目の画像は 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
:
回転
(
10
度);

-webkit-
transform
:
回転
(
10
度)

transform
:
回転
(
10
度);
.sim-anim
-1:
hover img:nth-child(
2
){

-ms-
transform
:
rotate
(
-10
deg)

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

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

- ms-
transform
:
rotate
(
20
deg);

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

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

-webkit-
transform
:
回転
(
-20
度);

transform
:
回転
(
-20
度);
}
.sim-anim
-1:
hover img:nth-child(
5)
){

-ms-
transform
:
rotate
(
30
deg);

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

-ms-
transform
:
rotate
(
-30
deg);
-webkit-
transform
:
rotate
(
-30
deg); over img :nth-child(
7
){

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

-webkit-
transform
: スケール
(
0.9
,
0.9
);
}


使い方あなた自身のプロジェクトでこの IE 画像表示効果はありますか?

これら 9 つの画像プレビュー表示効果のいずれかをプロジェクトに使用したい場合は、sim-prev-anim.css ファイルを導入し、画像ラッピング コンテナーの名前が異なる場合は適切な名前を設定する必要があります。 sim-prev-anim.css の名前を変更するには、css ファイルを変更し、適切な数の画像を追加し、albums-tab-thumb 要素に追加する必要があるアニメーション効果のクラス名を選択する必要があります。
注意: 各エフェクトの写真の数は固定されており、その数が間違っていると、表示されるエフェクトが見苦しくなります。
転載元: http://www.htmleaf.com/css3/css3donghua/201503071476.html



HTML5 コンテンツの詳細については、









をクリックしてください。