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

推薦する

Vue でルートをジャンプする方法をご存知ですか?

目次最初の方法: router-link (宣言型ルーティング) 2番目の方法: router.pu...

CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする

zhangxinxu より https://www.zhangxinxu.com/wordpress...

ウェブページヘッダーの最適化の提案

ロゴの最適化: 1.ロゴ画像はできるだけ小さくしてください。 2. 一般的には背景として配置されます...

WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...

Mysql データベースの日付と日時型でデフォルト値 0000-00-00 を設定するときに発生するエラー問題の詳細な説明

現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...

ネイティブ JS でスネーク ゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...

Centos7 Zabbix3.4 メールアラーム設定(メール内容がxx.bin添付ファイルになる問題の解決)

目次1. 監視Linuxホストを追加する2. メールボックスを設定する1. 監視Linuxホストを追...

JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...

Linux システムの /etc/fstab ファイルの詳細な解釈

序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

MySQL トリガーの使用シナリオとメソッドの例

トリガー:トリガーの使用シナリオと対応するバージョン:トリガーは次の MySQL バージョンで使用で...

MySQL 8.0.11 Community Green Edition の Windows 用インストール手順図

このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...

Linux における $ 記号の基本的な使い方のまとめ

Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

ウェブサイトレイアウトにおける CSS の計算関数 calc の例

calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 ...