ホバーエフェクト - II

Coddyの「3Dカード | フロントエンドプロジェクト」コースのレッスン 31/31。

このコードは、"bottom"クラスを持つ要素の中にある"social-buttons-container"クラスのコンテナ内のソーシャルボタンのスタイルを設定しています。詳しく説明します：

最初の3つのコードブロックは、ソーシャルボタンのトランジション（遷移）を設定しています。各ボタンには、トランジションが開始されるまでの異なる遅延時間が設定されています。トランジションは、"transform"プロパティ（おそらく動きを制御）と"box-shadow"プロパティ（おそらく影の効果を制御）に対して適用されます。これらのトランジションにより、ボタンの動きや影の変化が時間の経過とともにスムーズになります。
4番目のブロックは、ソーシャルボタン内のSVG（Scalable Vector Graphics）アイコンの幅と塗りつぶしの色（fill color）を設定します。
5番目のブロックは、ソーシャルボタンがホバーされたときのスタイルを設定します。背景色を黒に変更し、カーソルをポインターに変更して、クリック可能であることを示します。
最後のブロックは、ソーシャルボタンがホバーされたときにSVGアイコンの塗りつぶしの色を白に変更し、ユーザーに視覚的なフィードバックを提供します。

チャレンジ

簡単

このコードを使用してください：

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #008982;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
  cursor: pointer;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.glass{
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  transform: translate3d(0px, 0px, 25px);
  transition: all 0.5s ease-in-out;
}

3Dカードの完成です！

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

ホバーエフェクト - II

3Dカード | フロントエンドプロジェクトのすべてのレッスン