光るテキストとちょっとした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配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

推薦する

Html+CSS フローティング広告ストリップの実装

1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...

Linux CDの意味と使い方

Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...

HTML でテキストの折り返しを実装する例 (HTML でテキストと画像が混在)

1. 画像の周りのテキスト通常のものを使用する場合、たとえば次のようになります。コードをコピーコー...

HTMLのセマンティクスといくつかの簡単な最適化についての簡単な説明

1. セマンティゼーションとは何ですか? Bing辞書の説明セマンティクス化とは、適切な HTML ...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

オブジェクトのプロパティを反復処理する際の TypeScript の問題

目次1. 問題2. 解決策1. オブジェクトをanyとして宣言する2. オブジェクトのインターフェー...

Vueは左上と右上のスライドナビゲーションを実装します

ナビゲーションなどは日々の開発でよく使うので、記録として記事を書きます。ナビゲーションは終了/開始位...

携帯電話番号の真ん中の4桁を隠すMySQL SQL文の方法

最初のクエリ テーブル構造 (sys_users): sys_users から * を選択します。最...

シンプルなドラッグ効果を実現するJavaScript

この記事では、ドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

Vueのカスタムディレクティブの詳細なガイド

目次1. カスタム指示とは何ですか? 2. 指示をカスタマイズする方法フック機能3. 応用シナリオ入...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

VMware Workstation Pro が Windows で実行されない場合の解決策

国慶節の休暇後、Windows アップデート後に VMware 仮想マシンが開けなくなり、「VMwa...

Vue3 での Teleport の使用に関する詳細な説明

目次テレポートの目的テレポートの仕組みこの記事では、以下の内容を取り上げます。テレポートの目的テレポ...