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

画面の幅/高さ (CSS のみ)

Temani Afif は通常、CSS デモとともにこのリストに表示されます。今回は、印象的なことのおかげで、カスタム プロパティを at-property および三角関数と組み合わせることで、画面の高さと幅を表示できるようになりました。JavaScript は一切使用しません!

---

WebGL インタラクティブ BLOB

これらのかわいい塊の上にマウスを置くと、反応して動くのがわかります (すでに動いている以上に)。これは、Ksenia Kondrashova による WebGL を使用した楽しいデモで、Web サイトのインタラクティブな (そして気を散らす) 背景として使用できます。

---

映画の名言ハック

映画の引用やペースの速い絞首刑執行人ゲームが好きなら、Alexandre Vacassin によるこのデモが最適です。文字をクリックして映画の引用を推測します (キーボードのオプションはありません、ご存知のとおり)。ただし、注意してください。タスクを完了するまでの時間は 1 分で、失敗するたびに 5 秒減算されます。

---

リング迷路

もう 1 つのゲーム、今回は ZIM によるものです。 ThreeJS で作成されたこの立体迷路はリング状になっています。 CodePen チャレンジ用にコード化されたこの楽しいデモでは、ボールが迷路の周りでマウスを追いかけます (時には難しい場合もあります)。

---

ナビゲーションホバー効果

Veronica Hristova がこの対話型ナビゲーションをコーディングしました。 ::before および ::after 擬似要素を使用して、データ属性で指定されたテキストを複製し、ホバー時にカラフルな 3D 効果を生成します。シンプルでかっこいいです。

---

Three.Js ブロビーアップル

これは、Ksenia Kondrashova による別のデモです。回転すると流動的に動くこのリンゴの周りを回転させ、形を失ったり、新しい形を取り戻したりします。これは ThreeJS を使った素晴らしい実験です。

---

請求書分割アプリ

Dribbble (コードペンの説明にリンク) で見つかったデザインに触発され、Dilum Sanjaya は React と Tailwind を使用してこの請求書スプリッターのライブ バージョンをコーディングしました。見た目もすっきりします

---

スズメ

最近このシリーズには CSS アートがほとんどありませんでしたが、Alina によるこの美しいスズメの絵は驚くべき復活です。 Behance の図面 (コード内でリンクされている) に基づいており、コードの単純さは図面のきれいさと対照的です。素晴らしい作品です。

---

IK ラグーンの生き物

画面上でマウスを動かして、この生き物/塊がどのように追従するかを確認してください。最初は上部に取り付けられていたこのワーム (? ヒル? 生き物!) は、移動するにつれて切り離されて成長します。 Liam Egan はこのデモを開発しました。

---

3D ジェンガ — CSS

Josetxu によってプログラムされた 3D CSS ゲーム。ジェンガは完全には再生できませんが、中央のピースをクリックするとアニメーションして動きます (その後、「逆ジェンガ」でそれらを内側に押し戻すことができます)。

---

---

これらのデモが気に入ったら、2024 年 6 月の 10 個のクールな CodePen デモを含む前の記事をチェックしてください!

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