コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド CSSチュートリアル いいね！ CSS を使用してレスポンシブなスタック カードのホバー効果を作成する

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

Aug 31, 2021 pm 03:29 PM
css

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

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

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

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

サンプル コード 1:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<!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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<!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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

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

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

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール Tags

コード&IT
オーディオ
仕事
マーケティング
AI検出器
チャットボット
デザイン&アート

人気の記事

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
2つのポイント博物館：すべての展示とそれらを見つける場所
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7128
9
Java チュートリアル
1534
14
Laravel チュートリアル
1256
25
PHP チュートリアル
1205
29
CakePHP チュートリアル
1153
46
もっと見る
Related knowledge
Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue におけるプレースホルダーの意味

vueでスペースを書く方法 vueでスペースを書く方法 Apr 30, 2024 am 05:42 AM

vueでスペースを書く方法

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

jsでのスパンの意味は何ですか

vueでdomを取得する方法 vueでdomを取得する方法 Apr 30, 2024 am 05:36 AM

vueでdomを取得する方法

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

jsでレムは何を意味しますか

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

vueに画像を導入する方法

スパンタグの機能とは何ですか スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

スパンタグの機能とは何ですか

ブラウザのプラグインは何語で書かれていますか? ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザのプラグインは何語で書かれていますか?

See all articles