純粋な CSS3 のクールな記事カード UI デザイン効果

これは、純粋な CSS3 を使用して作成されたクールな記事カード UI デザイン効果です。記事カードには影の効果があり、マウスをカード上でスライドさせると、記事の説明情報がスライドするアニメーションでカード内に表示されます。

オンラインプレビュー ソースコードのダウンロード

使い方

HTML構造

カードの HTML 構造は次のとおりです:

CSS スタイル

カードラップ容器全体にflexがレイアウトされています。

各カードの幅と高さは 380 ピクセルに設定されています。そして、box-shadow プロパティを使用してカードに大きな影効果を設定し、すべてのアニメーションに ease-out 効果遷移アニメーションを設定します。

カード内の画像は絶対配置を使用し、幅と高さの両方が 100% でカード全体を占めます。

カード内のテキスト レイヤー ページでは、絶対配置が使用されます。z-index属性将文字放置在图片之上。h2文本和pテキストは、translateX 関数によって -200% 移動されます。つまり、カードの外側に移動され、最初は表示されません。

マウスをカード上でスライドさせると、カードの影が変更され、カードが1.05倍に拡大されます。カード内の画像の透明度が 0.2 に設定され、テキストが元の位置に戻り、透明度が 1 に設定されます。

オンライン プレビュー ソース コードのダウンロード