ホームページ >ウェブフロントエンド >jsチュートリアル >✨ インタラクティブなネオンカーソル軌跡効果 ✨ コード
✨ インタラクティブなネオンカーソル軌跡効果 ✨ コード
- DDDオリジナル
- 2024-12-05 06:46:101029ブラウズ
インスタグラムでフォローしてください: 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;
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;
背景: #0d1117; /* コーディングの雰囲気を演出する暗い背景 */
色: 白;
フォントファミリー: 'Courier New'、等幅; /* コーダーの感覚を考慮した等幅フォント */
オーバーフロー: 非表示;
カーソル: なし。 /* デフォルトのカーソルを非表示にする */
トランジション: バックグラウンド 0.5 秒の緩和。
}
/* カスタム カーソル スタイル */
.cursor {
位置: 絶対;
幅: 20ピクセル;
高さ: 20ピクセル;
境界半径: 50%;
背景色: #ffffff;
ボックスシャドウ: 0 0 10px rgba(255, 255, 255, 0.8); /* ネオングローエフェクト */
ポインターイベント: なし。
変換: 変換(-50%, -50%);
トランジション: すべて 0.1 秒のイーズ。
}
/* カーソルの後ろのネオンの軌跡 */
.neon-trail {
位置: 絶対;
幅: 5px;
高さ: 5px;
境界半径: 50%;
ポインターイベント: なし。
変換原点: 中心;
アニメーション: trailEffect 1.5 秒のイーズアウト前方。
}
/* 軌跡を拡大するアニメーション */
@keyframes trailEffect {
0% {
変換: スケール(1);
不透明度: 1;
}
100% {
変換: スケール(10);
不透明度: 0;
}
}
/* ページの明るい境界線効果 */
.page-border {
位置: 絶対;
トップ: 0;
左: 0;
右: 0;
下: 0;
ボーダー: 2px ソリッド #ffffff;
ポインターイベント: なし。
ボックスシャドウ: 0 0 15px rgba(255, 255, 255, 0.7);
}
</スタイル>
</head>
<!-- ページの周囲のカスタム境界線 -->
<div>
</div>
以上が✨ インタラクティブなネオンカーソル軌跡効果 ✨ コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
html for pointer default display position overflow margin padding border viewport background transform transition animation flex https Translate
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。