光るテキストとちょっとしたJS特殊効果を実現するCSS

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア:

CSSでtext-shadowを使用してテキストの光る効果を実現します

効果画像:

コードは次のとおりです。

</head>
  <スタイル>
    体{
      背景色:#000;
    }
    .テキストエリア{
      フォントサイズ:100px;
      色:#fff;
      テキストシャドウ:0 0 5px #e0ea33,
           0 0 15px #e0ea33,
           0 0 25px #e0ea33;
      上マージン:200px;
      テキスト配置:中央;
    }
  </スタイル>
<本文>
  <p class="textArea">帅</p><!--ここにテキストコンテンツ-->
 </本文>
<スクリプト>
  var text = document.querySelector ('.textArea'); //Pタグを取得する //マウスポインタがPタグに入るとトリガーする text.onmouseenter = function () {
  text.innerHTML = '私はあなたの父です'; //Pタグ間のHTMLを設定します
  };
  //マウスポインタがPタグから離れたときにトリガーします text.onmouseleave=function(){
  text.innerHTML = 'cool'; //Pタグ間のHTMLを設定する
  };
</スクリプト>

要約する

上記は、エディターが導入した発光テキストとちょっとした JS 特殊効果の CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。

<<:  WEB 標準ウェブページ構造

>>:  JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

推薦する

Web データ ストレージ: Cookie、UserData、SessionStorage、WebSqlDatabase

クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...

JavaScript を使用せずに HTML の a タグを無効にするには、純粋な CSS を使用します。

実際、この問題は、HTML の select タグを初めて学んだときにすでに発生していました。今日に...

JDKネイティブスレッドプールのバグを修正するTomcatの実装原理

処理能力と同時実行性を向上させるために、Web コンテナは通常、リクエストを処理するタスクをスレッド...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

HTML と CSS の基礎 (必読)

(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...

VueプロジェクトにPWAを導入する手順

目次1. 依存関係をインストールする2. vue.config.js ファイルで pwa を設定しま...

乱数、文字列、日付、検証コード、UUIDを生成するMySQLメソッド

目次乱数を生成する0から1までの乱数を生成する指定された範囲内で乱数を生成します6桁のモバイル認証コ...

5 分で vue-cli3 を使用してプロジェクトを作成する方法を説明します (初心者向けガイド)

目次1. Vue環境を構築する2. Vue スキャフォールディングツール3. プロジェクトを作成する...

HTMLはマーキーを使用してテキストを左右にスクロールします

コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

html-cssタグのスタイル設定が機能しない2つの理由

1 セミコロン「;」のない CSS スタイル2 タグが閉じられておらず、「>」がありません...

MySQL エラー「すべての派生テーブルには独自のエイリアスが必要です」の解決方法

MySQL は、マルチテーブルクエリを実行するときにエラーを報告します。 [SQL] SELECT ...

Postman 自動インターフェーステストの実践

目次背景説明GETリクエストの作成事前リクエストスクリプトで署名を作成するスクリプトは環境変数に書き...

js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)

現在実装されているのは、基本的な使用方法、クリア可能なボックス、パスワードボックスです。参考リンク:...

Reactでパスワード強度検出器を実装する方法

目次序文使用コンポーネントの記述データ構造分析プロセス分析基礎コードの分析他の要約する序文パスワード...