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

ホバー効果付きのファンシーなアバターヘッダー (II)

Temani Afif は常にクールな CSS トリックを用意しています。今回は、アバターの位置に適応するアニメーションノッチです。これらはすべて、わずか数行の HTML と CSS コードで実現されます。

---

時針

スティックを動かすと、時刻を反映してウィンドウが変化するのを確認します。 Rafa によるこのインタラクティブなデモはうまく作られており、コンピューターの時間に適応して、パーソナライズされたエクスペリエンスを提供します。

---

軽量ピクセルディストーションアニメーション

Ksenia Kondrashova によるシェーダーを使った楽しい実験。さまざまな効果を得るためにタイルのサイズとオフセットをカスタマイズします。このエフェクトは水や砂のテクスチャをシミュレートするために使用されていることがわかりました。モーション警告: このデモではめまいがする可能性があります。

---

松の木

Guillaume Martigny は、木々の天頂の眺めで心を落ち着かせる 3D 効果を作成する JavaScript 2D 描画ライブラリである Pencil.js で作成された無限の松の森をもたらします。

---

ダンシング・バグズ (アニメーション)

Dribbble の漫画に触発されて、Grant Jenkins は虫が踊る美しいアニメーションを作成しました。描画は を使用して行われます。と JavaScript を使用すると、スムーズで楽しいです (詳細がたくさんあります!)

---

ドッカー

Mergim Ujkani によるいくつかの CSS アート: Docker のロゴのクジラが海で泳いだりジャンプしたりするアニメーション バージョン。シンプルで楽しい、HTML と CSS だけでコーディングできます。

---

キーフレーム内のターゲット範囲 - ビュータイムライン範囲

Mariana Beldi による素晴らしいスクロール駆動のアニメーション デモ。要素が移動、縮小、フェードアウトして、スムーズなスクロール エクスペリエンスを実現します。これらの小さなことがウェブサイトを次のレベルに引き上げます。

---

オリンピックのメダル

ギブソンによるオリンピックメダルカウンターコンポーネント。 React と Framer Motion で作成すると、特にアニメーションを制御する他のコンポーネントと組み合わせると、スポーツ Web サイトでクールなウィジェットが作成されます。

---

録音切り替え

Jon Kantner による新しいインタラクティブ コンポーネント: ユーザー インタラクションごと (最初と最後) および時間の経過に応じてアニメーション化する記録ウィジェット。滑らかです。

---

紡糸

yuanchuan は美しいアニメーション SVG と CSS Doodle を作成します。これも例外ではありません。回転するアニメーションは魅惑的で催眠術のようです…そしてコードはとてもシンプルです!信じられないほど素晴らしいです。

---

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