✨ インタラクティブなネオンカーソル軌跡効果 ✨ コード-jsチュートリアル-php.cn

✨ インタラクティブなネオンカーソル軌跡効果 ✨ コード

DDD

リリース： 2024-12-05 06:46:10

オリジナル

1018 人が閲覧しました

✨ Interactive Neon Cursor Trail Effect ✨ Code

インスタグラムでフォローしてください: 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 サイトの他の関連記事を参照してください。