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

推薦する

Ubuntu の起動後にアプリケーションを実行するためのターミナルの設定方法

1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

MySQL でのストアド プロシージャと関数の作成の詳細な説明

目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...

Linux の一般的なテキスト処理コマンドと vim テキストエディタ

今日は、いくつかの一般的なテキスト処理コマンドとvimテキストエディタを紹介します。 3日目 - 一...

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

Docker で最初のアプリケーションをデプロイする方法

前回の記事では、Docker Desktop をインストールし、Kubernetes を有効にしまし...

MySQL 学習データベースバックアップの詳細な説明

目次1.DB、DBMS、SQL 2. データベースの特徴3. SQL分類4. MySQLを起動および...

Jenkins の Publish Over SSH プラグインを使用してプロジェクトをリモート マシンにデプロイする手順

SSH プラグインの使用による公開Publish Over SSH を使用する前に、SSH 秘密キー...

HTMLタグの書き方でよくある間違い

注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...

レアタグフィールドセットと凡例の使用方法の詳細な説明

<fieldset>と<legend>については、ほとんどの人はおそらく馴染...

Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

Nginx を使用して rtmp ライブ サーバーを実行する方法

今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...

MySQL で主キーと ROWID を使用する際の落とし穴の概要

序文MySQL の rowid の概念については聞いたことがあるかもしれませんが、テストや実践が難し...