純粋な CSS3 のクールな記事カード UI デザイン効果-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 25, 2016 am 10:20 AM

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

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

使い方

HTML構造

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

リーリー

CSS スタイル

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

リーリー

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

リーリー

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

リーリー

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

リーリー

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

リーリー

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

声明

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

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、