CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明

音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へピクセルごとに水平に変わります。つまり、単語の左側と右側が異なる色で表示されます。

この効果は CSS3 を通じて実現できます。

実装のアイデア:

1.背景は背景色と変更する色を塗りつぶします

2. -webkit-background-clip:text;はテキストの背景を切り取ります。つまり、空のテキストです。

3. -webkit-text-fill-color:transparent; 切り抜いた文字を透明にして、切り抜いた形から背景色が透けて見えるようにします。このとき、背景色はフォントの色になります。

4. background-size:0 100%; 背景の幅を 0 に設定し、チャネルを通じて背景の幅を変更して、テキストの色の読み取り効果を実現します。

HTMLコード:

<div スタイル="padding:15% 35%; テキスト配置:center;">
    <span class="text">テキストの色を左から右に塗りつぶします</span>
</div>

CSSコード:

@keyframes スキャン {
	0% {
		背景サイズ:0 100%;
	}
	100% {
		背景サイズ:100% 100%;
	}
}
。文章 {
	背景:#7e7e7e -webkit-linear-gradient(左、#fff、#fff) 繰り返しなし 0 0;
	-webkit-テキストの塗りつぶし色:透明;
	-webkit-background-clip:テキスト;
	背景サイズ:0 100%;
}
。負荷 {
	背景サイズ:100% 100%;
	アニメーション: スキャン 5 秒 リニア;
}

jQuery コード:

window.onload = 関数(){
    $('.text').addClass('load');
}

注: 上記のコードで実現される効果は、Webkit ブラウザでのみサポートされます。

要約する

これで、歌詞の進行に合わせてテキストの色を変える動的な効果を CSS3 で実現する方法についての記事は終了です。CSS3 テキストの色塗りに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。

>>:  aタグに下線を付け、クリック前後で色を変える方法

推薦する

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...

Linuxネットワーク設定の基本操作コマンドを詳しく解説

目次ネットワーク構成を表示するネットワークインターフェース情報を表示する---ifconfigルーテ...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

CSSでプロセスナビゲーション効果を実現する(3つの方法)

CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...

ES6の新機能に関する最もよく使われる知識ポイントのまとめ

目次1. キーワード2. 脱構築3. 文字列4. 正規化5. 配列6. 機能7. オブジェクト8.シ...

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

MySQL DML言語操作例

追加説明、外部キー: 外部キーを使用しないでください。すべての外部キーの概念はアプリケーション層で解...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

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

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

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

CentOS 7 で RPM を使用して mysql5.7.13 をインストールする

0. 環境この記事のオペレーティング システム: CentOS 7.2.1511 x86_64 My...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

MySQL における varchar 型と char 型の違い

目次前述のVARCHAR型VARCHAR適用可能な状況CHAR型テストVARCHAR(5)とVARC...