クールなトランジションエフェクトの 10 個のコレクション

この記事では、"cool"" トランジション エフェクト 10 個を紹介します。作者が丁寧に記録した 10 個の Gif トランジション アニメーションが、皆様の目を魅了していただければ幸いです。もちろん、これらの特殊効果がトランジション エフェクトを設計する際に、皆さんに新しい ""インスピレーション"" をもたらすことを願っています。

アニメーション ページ トランジション効果のロード

❝

例の説明: ページがロードされると、クールなトランジションが生成されます特殊効果.

サンプル ソース: Arsen Zbidniakov

オンライン アドレス: https://codepen.io/ARS/pen/wavXgQ

❞

「静的レンダリング」

「Gif 動的レンダリング」

##3D カルーセル セグメンテーション特殊効果

❝

例の説明: ユーザーが次のカルーセル画像に切り替えると、セグメンテーションによりエフェクトの 3D トランジション効果が発生します。

サンプル ソース: Paul Noble

オンライン アドレス: https://codepen.io/paulnoble/details/yVyQxv

❞

「静的レンダリング」

#「Gif アニメーション レンダリング」

3D ページ反転効果

❝

説明例: ユーザーが次のページに切り替えると、3D の反転遷移特殊効果が生成されます。

サンプル ソース:

Robert Bue

オンライン アドレス: https://codepen.io/robbue/pen/ugByC

❞

「 「静的レンダリング」

# 「Gif 動的レンダリング」

##コンテンツのスケーリング遷移効果

❝説明例: メニューをクリックすると、コンテンツの表示時にコンテンツ展開アニメーションが表示されます。 #サンプル ソース:

Tobias Glaus

オンライン アドレス: https://codepen.io/tobiasglaus/pen/oZJdZY

❞

「静的レンダリング」

「GIF ダイナミック レンダリング」

サムネイルから全画面へのトランジション効果

❝例の説明: ユーザーがサムネイルをクリックすると、トランジションと表示画像の説明情報を経て全画面モードになります。 . サンプル ソース:

Steve Gardner

オンライン アドレス: https://codepen.io/ste-vg/pen/NALWrj

❞

「静的レンダリング」

# 「Gif アニメーション レンダリング」

#カード展開ページのトランジション効果

❝説明例: カードをクリックすると、カード展開ページのトランジション効果が生成されます。 サンプル ソース: Rachel Smith

オンライン アドレス: https://codepen.io/rachsmith/pen/PWxoLN

❞

「静的レンダリング」

#「Gif 動的レンダリング」

#単一ページのスクロール被写界深度効果

❝

説明例: マウス ホイールをスクロールするときこのページでは、被写界深度のトランジション効果が生成されます。

サンプル ソース:

Nikolay Talanov

オンライン アドレス: https://codepen.io/suez/pen/ JoWKKX

❞

「静的レンダリング」

##「Gif 動的レンダリング」

#単一ページ スクロールのチルト効果❝

説明例: ページ上でマウス ホイールをスクロールするとき、

サンプル ソース:

Nikolay Talanov

オンライン アドレス: https://codepen.io/suez/pen/gadLre

❞

「静的レンダリング」

「Gif 動的レンダリング」

##六角形の円形プレートのトランジション効果

❝例の説明: ユーザーがページ上の六角形をクリックすると、円形プレートのトランジション効果を生成します。

サンプル ソース:

Ryan Mulligan

オンライン アドレス: https://codepen.io/hexagoncircle/details/MKaVzM❞

「静的レンダリング」

##「Gif アニメーション レンダリング」

スティッキー エッジ特殊効果

❝例の説明: ユーザーが次の画像に切り替えると、スティッキー エッジ トランジションが生成されます。

サンプル ソース:

Zoey Fan

オンライン アドレス: https://codepen.io/zoeyfan/pen/ExVaXGK❞

「静的レンダリング」

##「Gif アニメーション レンダリング」

#元のアドレス: https://juejin.cn/post/6847009772672122894

著者: アバオ兄弟

詳細 プログラミング関連の知識については、こちらをご覧ください:

プログラミング入門

! ！

以上がクールなトランジションエフェクトの 10 個のコレクションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。