ホームページ >ウェブフロントエンド >jsチュートリアル >HTML CSS と JavaScript コードを使用した Glassmorphism Cards イリュージョン
HTML CSS と JavaScript コードを使用した Glassmorphism Cards イリュージョン
- DDDオリジナル
- 2024-12-09 14:27:17913ブラウズ
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>インタラクティブ ガラス カード</title>
* {
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
}
体 {
背景: 線形グラデーション(135度、#101010、#1f1f1f);
高さ: 100vh;
ディスプレイ: フレックス;
整列項目: 中央;
コンテンツの位置揃え: 中央;
オーバーフロー: 非表示;
フォントファミリー: Arial、サンセリフ;
}
.ネオンシェイプ {
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
ポインターイベント: なし。
}
丸、三角、四角形 {
位置: 絶対;
不透明度: 0.8;
フィルター: ぼかし(2px);
}
。丸 {
幅: 200ピクセル;
高さ: 200ピクセル;
背景: rgba(0, 255, 255, 0.8);
境界半径: 50%;
トップ: 20%;
左: 15%;
}
.triangle {
幅: 0;
高さ: 0;
境界左: 100 ピクセルの単色透明。
境界線右: 100 ピクセルの単色透明。
border-bottom: 200px ソリッド rgba(255, 0, 255, 0.8);
トップ: 50%;
左: 70%。
}
.rectangle {
幅: 220ピクセル;
高さ: 180ピクセル;
背景: rgba(255, 255, 0, 0.8);
トップ: 70%;
左: 30%。
}
.card-container {
ディスプレイ: フレックス;
ギャップ: 20px;
位置: 相対的;
z インデックス: 1;
}
.card {
背景: rgba(255, 255, 255, 0.1);
背景フィルター: ぼかし(10px);
幅: 230ピクセル;
高さ: 320ピクセル;
境界半径: 15px;
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
コンテンツの位置揃え: 間のスペース;
パディング: 20px;
ボックスシャドウ: 0 4px 30px rgba(0, 0, 0, 0.5);
トランジション: トランスフォーム 0.3 秒イーズ、ボックスシャドウ 0.3 秒イーズ。
}
.card img {
幅: 100ピクセル;
高さ: 100ピクセル;
境界半径: 50%;
トランジション: トランスフォーム 0.3 秒、ボックスシャドウ 0.3 秒。
}
.card h3 {
色: 白;
フォントファミリー: 'Lucida Sans'、'Lucida Sans Regular'、Geneva、Verdana、サンセリフ;
}
。著者 {
色: 白;
フォントサイズ: 14px;
マージントップ: -10px;
}
.フォローボタン {
背景: rgba(0, 255, 127, 0.7);
境界線: なし。
パディング: 15 ピクセル 25 ピクセル;
境界半径: 20px;
色: 白;
フォントサイズ: 18px;
カーソル: ポインタ;
テキスト変換: 大文字;
アニメーション: ネオンフリッカー 2 秒無限。
トランジション: バックグラウンド 0.3 秒。
}
.follow-btn:ホバー {
背景: rgba(0, 255, 127, 1);
}
@keyframes ネオンフリッカー {
0%、100% {
ボックスシャドウ: 0 0 10px rgba(0, 255, 127, 0.8)、0 0 30px rgba(0, 255, 127, 0.8)、0 0 50px rgba(0, 255, 127, 0.8);
}
50% {
ボックスシャドウ: 0 0 20px rgba(0, 255, 127, 1)、0 0 40px rgba(0, 255, 127, 1)、0 0 60px rgba(0, 255, 127, 1);
}
}.card:ホバー {
変換: スケール(1.1);
ボックスシャドウ: 0 8px 50px rgba(0, 255, 127, 0.8);
}
.card img {
幅: 100ピクセル;
高さ: 100ピクセル;
境界半径: 50%;
トランジション: トランスフォーム 0.3 秒イーズ、フィルター 0.3 秒イーズ。
}
.card:ホバー画像 {
変換：translateY(-10px);
}
.card img.active {
変換：translateY(-30px)scale(1.2);
フィルター: ドロップシャドウ(0 0 20px rgba(255, 255, 0, 1));
}
</スタイル>
</head>
<div>
</div>
以上がHTML CSS と JavaScript コードを使用した Glassmorphism Cards イリュージョンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript css html Filter using pointer display position overflow margin padding border viewport background transform transition animation column flex
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。