コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

いいね！ CSS を使用してレスポンシブなスタック カードのホバー効果を作成する

藏色散人
リリース： 2021-09-24 17:54:43
オリジナル
2634 人が閲覧しました

前回の記事「CSSを使ってPNG画像の色を素早く変える(2つの方法)」では、CSSを使ってPNG画像の色を素早く変える方法を紹介しました。 ~

この記事では、CSS を使用してレスポンシブなスタック カードのホバー効果を作成する素晴らしい効果を紹介します。効果は何ですか?続きを読みましょう！

始める前に、実装の全体的な一般的なアイデアを紹介します: まず、HTM で単純なカード構造を設計します。次に、::before および ::after 擬似要素を定義します。親カードが絶対的に配置され、次に、transform 属性を使用してクラス "card-inner" の div を元の位置から移動し、最後に、次のような変換を使用してカードのスタックにホバー効果を追加します。ホバー効果の前後でカードを移動します。

コードはすぐ下にアップロードされます。

サンプル コード 1: 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

        /* 将叠好的卡片放在不同的位置 */
        .cards:hover {
            transform: translate(5px, 5px);
        }

        .cards:hover::before {
            transform: translate(-5px, -5px);
        }

        .cards:hover::after {
            transform: translate(-10px, -10px);
        }
    </style>
</head>

<body>
<center>
    <h1>欢迎来到PHP中文网</h1>
    <div class="card-container">
        <div class="card cards">
            <div class="card-inner">
                <h1>将鼠标移至方框内</h1>
                <h3 class="card-title">
                    PHP中文网
                </h3>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>
ログイン後にコピー

効果は次のとおりです:

GIF 2021-8-31 星期二 下午 3-16-35.gif

サンプル コード 2 : 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        :root {
            --offset-before: 8px;
            --offset-after: 16px;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

    
        .cards-diagonal::before {
            transform: translate(calc(-1 * 8px),
            calc(-1 * 8px));
        }

        .cards-diagonal::after {
            transform: translate(calc(-1 * 16px),
            calc(-1 * 16px));
        }

        .cards-diagonal:hover::before {
            transform: translate(8px, 8px);
        }

        .cards-diagonal:hover::after {
            transform: translate(16px, 16px);
        }


        .cards-rotate::before,
        .cards-rotate::after {
            transform-origin: 50% 100%;
        }

        .cards-rotate:hover {
            transform: translate(2.5px, 0) rotate(2.5deg);
        }

        .cards-rotate:hover::before {
            transform: translate(2.5px, 0) rotate(2.5deg);
        }

        .cards-rotate:hover::after {
            transform: translate(5px, 0) rotate(5deg);
        }
        }
    </style>
</head>

<body>
<center>
    <h1>欢迎来到PHP中文网</h1>
    <div class="card-container">
        <div class="card cards-diagonal">
            <div class="card-inner">
                <h1>将鼠标移至框内</h1>
                <h3 class="card-title">PHP中文网</h3>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
    <div class="card-container">
        <div class="card cards-rotate">
            <div class="card-inner">
                <h1>将鼠标移至框内</h1>
                <h3 class="card-title">PHP中文网</h3>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>
ログイン後にコピー

効果は次のとおりです:

GIF 2021-8-31 星期二 下午 3-20-31.gif

サンプル コード 3: 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            color: #FDFAF6;
            background: #50CB93;
        }

        :root {
            --offset-before: 8px;
            --offset-after: 16px;
        }

        .card {
            position: relative;
            width: 400px;
            margin: 60px auto;
        }

        .card::before,
        .card::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .card::before,
        .card::after,
        .card .card-inner {
            background-color: #423F3E;
            border: 1px solid #01937C;
            transition: transform 0.5s;
        }

        .card::before,
        .card-inner {
            z-index: 1;
        }

        .card-inner {
            position: relative;
            padding: 4rem;
        }

        /*Stacked => Up*/
        .cards-up::before,
        .cards-up::after {
            transform-origin: center bottom;
        }

        .cards-up:hover {
            transform: translate(0, -5px);
        }

        .cards-up:hover::before {
            transform: translate(0, 5px) scale(0.95);
        }

        .cards-up:hover::after {
            transform: translate(0, 10px) scale(0.90);
        }

        /*Stacked => Right */
        .cards-right::before,
        .cards-right::after {
            transform-origin: left center;
        }

        .cards-right:hover {
            transform: translate(5px, 0);
        }

        .cards-right:hover::before {
            transform: translate(-10px, 0) scale(0.95);
        }
        }

        .cards-right:hover::after {
            transform: translate(-10px, 0) scale(0.90);
        }
        }
    </style>
</head>

<body>
<center>
    <h1>欢迎来到PHP中文网</h1>
    <div class="card-container">
        <div class="card cards-up">
            <div class="card-inner">
                <h1>将鼠标移至框内</h1>
                <h3 class="card-title">PHP中文网</h3>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
    <div class="card-container">
        <div class="card cards-right">
            <div class="card-inner">
                <h1>将鼠标移至框内</h1>
                <h3 class="card-title">PHP中文网</h3>
                <div class="card-body">
                    编程学习平台
                </div>
            </div>
        </div>
    </div>
</center>
</body>

</html>
ログイン後にコピー

効果は次のとおりです:

GIF 2021-8-31 星期二 下午 3-23-57.gif

PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「css ビデオ チュートリアル 」を学習してください。

以上がいいね！ CSS を使用してレスポンシブなスタック カードのホバー効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css
ソース：php.cn
前の記事：CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法) 次の記事：css3 を使用してクールなナビゲーション バー効果を作成する方法を段階的に説明します (詳細なコードの説明)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート