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

推薦する

MySQL テーブル名の大文字と小文字の選択

目次1. 大文字と小文字の区別を決定するパラメータ2. パラメータ変更に関する注意事項要約: 1. ...

nginx のロケーションで URI の傍受を実装する方法

例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...

Linux の一般的なコマンドとショートカット キーの紹介

目次1 システムの紹介2 システムショートカット3 一般的なシステムコマンド1 システムの紹介 1....

MySQL のデッドロックとデータベースおよびテーブル シャーディングの問題の詳細な説明

MySQL 運用上の問題点を記録します。ビジネスシナリオと問題の説明外部インターフェースをリクエスト...

Mysql 8.0.18 ハッシュ結合テスト (推奨)

ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

Zookeeperスタンドアロン環境とクラスタ環境の構築

1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...

HTML における相対と絶対の使用法と違いの詳細な説明

HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...

HTML 選択タグにおける単一選択と複数選択の詳細な説明

select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザ...

知らないかもしれない実用的なTypeScriptのヒント

目次序文関数のオーバーロードマッピングタイプ部分的、読み取り専用、Null 可能、必須選択、記録除外...