ホームページ >ウェブフロントエンド >jsチュートリアル >HTML と CSS を使用して幻想的な背景を持つ見事なベンド & リビール ホバー エフェクトを作成する
HTML と CSS を使用して幻想的な背景を持つ見事なベンド & リビール ホバー エフェクトを作成する
- DDDオリジナル
- 2024-12-03 22:36:11671ブラウズ
インスタグラムでフォローしてください: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="ja">
<メタ文字セット="UTF-8">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<title>ベンド＆リビールエフェクト</title>
* {
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
}
体 {
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
高さ: 100vh;
背景: 線形グラデーション(135度、#1e1e1e、#3c3c3c);
オーバーフロー: 非表示;
フォントファミリー: Arial、サンセリフ;
}
。容器 {
位置: 相対的;
幅: 300ピクセル;
高さ: 400ピクセル;
視点: 1200ピクセル;
オーバーフロー: 表示;
}
/* 幻想的な光るグリッドの背景 */
.illusion-bg {
位置: 絶対;
上: -20px;
左: -20px;
幅: calc(100% 40px);
高さ: calc(100% 40px);
背景: 繰り返し線形グラデーション(45度、
rgba(255, 255, 255, 0.1) 0 5px、透明 5px 10px);
境界半径: 15px;
box-shadow: インセット 0 0 50px rgba(255, 255, 255, 0.05),
0 0 30px rgba(0, 255, 255, 0.5);
z インデックス: -1;
フィルター: ぼかし(5px);
}
.image-wrapper {
位置: 相対的;
幅: 100%;
高さ: 100%;
変換原点: 中央下;
トランジション: トランスフォーム 0.8 秒イーズ、ボックスシャドウ 0.8 秒イーズ、フィルター 0.6 秒イーズ。
境界半径: 15px;
オーバーフロー: 非表示;
z インデックス: 1;
}
.image-wrapper img {
幅: 100%;
高さ: 100%;
オブジェクトフィット: カバー;
境界半径: 15px;
フィルター: 明るさ(80%);
トランジション: フィルター 0.8 秒のイージング。
}
.reveal-png {
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
背景: url('./removebg.png') リピートなしの中央。
背景サイズ: カバー;
不透明度: 0;
変換:translateY(50px)scale(0.9);
トランジション: 不透明度 0.8 秒イーズ、トランスフォーム 0.8 秒イーズ、フィルター 0.6 秒イーズ。
フィルター: ドロップシャドウ(0 0 15px rgba(255, 255, 255, 0.9));
}
/* ホバー効果 */
.container:hover .image-wrapper {
変換: 回転X(-70度) スケール(1.05);
ボックスシャドウ: 0 30px 60px rgba(0, 0, 0, 0.8);
フィルター: 色相回転(30度);
}
.container:hover .image-wrapper img {
フィルター: 明るさ(100%) 飽和(1.2);
}
.container:hover .reveal-png {
z インデックス: 1;
不透明度: 1;
変換:translateY(0)scale(1.06);
フィルター: ドロップシャドウ(0 0 20px rgba(0, 255, 255, 0.8));
}
.container:hover .illusion-bg {
アニメーション: パルス 2 秒の無限代替イーズインアウト。
}
@keyframes パルス {
0% {
変換: スケール(1);
不透明度: 0.8;
}
100% {
変換: スケール(1.05);
不透明度: 1;
}
}
</スタイル>
</head>
<div>
</div>以上がHTML と CSS を使用して幻想的な背景を持つ見事なベンド & リビール ホバー エフェクトを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css html Object Filter using display position overflow margin padding border viewport background transform transition animation flex https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。