ホームページ  >  記事  >  ウェブフロントエンド  >  クールな CodePen デモ (7 月 4 日)

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

WBOY
WBOYオリジナル
2024-08-07 13:40:43734ブラウズ

Cool CodePen Demos (July 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。