CodePen の 15 のクールな CSS アニメーション効果 [パート 2]_html/css_WEB-ITnose

CodePen は、コードを記述して効果を即座にプレビューできる、オンラインのフロントエンド コード編集および表示 Web サイトです。そこでは、Web の作品をオンラインで共有したり、世界中の優れた開発者によって Web ページ上で実現されたさまざまな驚くべき効果を楽しむこともできます。

今日の記事では、芸術作品とも言えるアニメーション効果のクールな CSS の例を 15 個厳選しました。 (最良の結果を保証するには、Chrome、Firefox、Safari などの最新のブラウザで閲覧してください)

9. 3D シンセ

Pure CSS 3D シンセサイザー (マウスダウンで回転) by Nikolay Talanov (@suez)。

3D を使用する純粋な CSS で作成された電子キーボード効果。マウスをクリックすると回転できます。

10. カスケード太陽系

Tady Walsh (@tadywankenobi) による

回転速度、衛星、およびすべての主要な惑星の詳細を備えた太陽系のモデル。まるで現実世界のもののようです！

11. 3D Solar System

Wayne Dunkley (@waynedunkley) によるフル CSS 3D Solar System。

別の太陽系システム モデルですが、これは美しい影の効果を備えた 3D モデルです。

12. フラット デザイン カメラ

Damien Pereira Morberto (@damienpm) による CSS アニメーションを備えたフラット デザイン カメラ

CSS アニメーションを使用して、カメラのシャッターを押して写真を撮るアニメーション効果をシミュレートします。

13. 昼と夜の移行

Szymon Stypa (@Catagen) による昼夜のシミュレーション。

昼と夜のシミュレーション効果を確認するには、下のボタンをクリックしてください。

14. CSS を使用したアニメーション スプライト

Avaz Bokiev (@samarkandiy) による CSS を使用したアニメーション スプライト

前進および後退モーションを備えたストップモーション アニメーションを作成するために使用できます。

15. 十二面体

wontem (@wontem) による十二面体。

CSS だけで作成された繊細で美しい十二面体のアニメーション。

ページが固まって読み込めない 前回の記事はこちら「CodePenのクールなCSSアニメーションエフェクト15選【パート２】」をご覧ください

=============== === ========================================