ホームページ >ウェブフロントエンド >CSSチュートリアル >プロジェクト拡張カード - 私の&#数日間のプロジェクト&#の旅

プロジェクト拡張カード - 私の&#数日間のプロジェクト&#の旅

WBOY
WBOYオリジナル
2024-08-22 08:32:061059ブラウズ

Project Expanding Cards - My

これは、「50 日間で 50 のプロジェクト」コースのプロジェクト 1/50 のショーケースです。ただし、過去 50 日間 (あるいはもう少し!) ですべてのプロジェクトを完了しました。 )、私はそれらを私のやり方でやりたかったのです。つまり、プロジェクトの主なアイデアや主なコンセプトを理解して、それを適切に理解し、その長所と短所を確認し、さらにはそれを次のレベルに引き上げることさえできます。

このプロジェクトの主なアイデアは、クリックすると展開する多数のカード (またはパネル) を作成するという単純なものでしたが、ここでは他にも次のようなものを実装する必要がありました。

  • マウスクリックではなく、Popover API を使用してパネルを展開します。
  • Unsplash API から画像を取得しています。
  • マウスの動きでパネルをインタラクティブにします。
  • webkit-box-reflect を使用して各パネルの下にリフレクションを追加します。
  • 各パネルに色付きのシャドウを追加します (SVG フィルターを使用)。

これらのことを実装した後、このプロジェクトは次のレベルに移行しました。美しさと並行してシンプルさの中に複雑さを示すものです。将来的にはカラー サンプリング機能を適用できるかもしれません!

皆様のご意見、ご提案、ご感想をお待ちしております。また、「いいね!」や「フォロー」も忘れずにお願いいたします。

私の 50 日間の旅の 50 プロジェクトのレポ
Twitter でご連絡ください
Linkedin でご連絡ください

以上がプロジェクト拡張カード - 私の&#数日間のプロジェクト&#の旅の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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