クールな CodePen デモ (8 月 4 日)

アイデアフォーム

このデモは、クールなアイデアの送信/リマインダー コンポーネントです。スムーズな移行、完璧な色の選択、適切な量のインタラクションにより、優れたユーザー エクスペリエンスが実現します。これは、Jon Kantner によるこのリストの 2 つのデモのうちの 1 つ目です。

揺れるロボット

Amit Sheen が CSS の 3D パワーを再び紹介します。今回はブランコで遊ぶロボットです。詳細を確認し、体のさまざまな部分がどのように連動して滑らかで美しいアニメーションを作成するかを確認してください。

バーズ・アイ・メトロポリス

上空から見た印象的な無限の都市の眺め (マウスをその上に移動すると方向が変わります。) そして、それがさらに驚くべきものであることを知っていますか?一般的な 3D ライブラリは一切使用しません。バニラのJavaScriptです。素晴らしいデモを作成した Niklas Knaack に敬意を表します。

アルバムミームジェネレーターを抱き締めるチャンドラー

最近の政治的ミーム (彼女もコード化した) に基づいて、イネスはフレンズにインスピレーションを得たミームをもたらしました: アルバムを持ったチャンドラー ビーン。スリーブはファイル入力なので、イメージを自由にカスタマイズできます。きちんとした。

ローテーションが好きだと聞きました

別の 3D アニメーションのデモ。宇宙に浮遊し、ノンストップで回転するプラットフォーム(?)。 Scott R McGann によるこの催眠術のデモも、バニラ JavaScript とキャンバスでコーディングされています。

ムードボード

ハンナは、ウェブ用の素敵な画像ギャラリーとしても機能するこのボードを共有しました。ちょっとしたアニメーションやトランジションがあり、高校や大学の雰囲気があります…誰かが懐かしいと言いましたか?

3D空間スクロールズーム

さらに 3D CSS! (今月のリストには確実にパターンがあります。) スクロール駆動のアニメーションと 3D 変換および不透明度を組み合わせることで、純粋な CSS でこのクールな効果が作成されます。 Adam Argyle による素晴らしいデモです。

ルーブ・ゴールドバーグ HTML フォーム

これは、クセニア・コンドラショワによってうまく実装された楽しいアイデアです。フォームに記入すると、仕掛けが動き、送信ボタンが表示される位置に近づきます。この機械は実用的ではないかもしれませんが、フォームが変わって驚きの要素をもたらします。

バッジ内のテキストメッセージのプレビュー

Jon Kantner による別のコンポーネント。これはデータを表示する興味深い方法です。メッセージがあることがわかるだけでなく、バ​​ッジの上にマウスを置くとメッセージを読むことができます。これは、モバイルを超えて (ホバー効果が課題となる場合)、Web 上の通知にも役立つ可能性があります。

カルーセル

リストの最後に、もう 1 つの 3D CSS デモがあります。今回は Vicio Bonura によるもので、コードがシンプルで理解しやすいため、他のカルーセルを生成するためのテンプレートとして役立つ CSS カルーセルを作成しました。

以上がクールな CodePen デモ (8 月 4 日)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。