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タグに下線を付け、クリック前後で色を変える方法

推薦する

Ubuntu 基本チュートリアル: apt-get コマンド

序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...

VirtualBox でのホストオンリー + NAT モードのネットワーク構成

VirtualBoxのHost Only+NATモードのネットワーク構成は参考用です。具体的な内容は...

VirtualBox で作成された Debian 仮想マシンは Windows ホストとファイルを共有します

用語: 1. VM: 仮想マシンステップ: 1. Windows 10 に VirtualBox 6...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

入力タイプとは何を意味し、入力を制限する方法

入力を制限する一般的な方法1. ボタンが押されたときに点線のボックスを消すには、入力に属性値hide...

Docker: /etc/default/docker の DOCKER_OPTS パラメータを変更しても反映されない

デフォルトでは、 /etc/default/docker 設定は有効になりません。docker 環境...

検索ナビゲーションバー付きの CSS サンプルコード

この記事では、CSS を使用して検索機能付きのナビゲーション バーを作成する方法を説明します。以下の...

uniappは録音アップロード機能を実現

目次uni-app の紹介HTML部分js部分インスタンスを作成する録音を開始録音終了録音を再生再生...

クロスオリジン画像リソース権限(CORS 対応画像)

HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...

CSSはメッセージパネルをスライドするWebコンポーネント機能を実装します

みなさんこんにちは。私と同じように混乱している方はいらっしゃいませんか。CSS は簡単に始められます...

マウスを置いたときに半透明効果のテキスト説明を実現するための純粋な CSS (初心者は必読)

効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...

Linux deb パッケージの解凍、変更、その他の操作方法のコード例

さまざまな理由により、debパッケージ内のさまざまなファイルの内容を直接変更する必要がある場合があり...

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

MySQLユーザーと権限管理の詳細な説明

この記事では、例を使用して MySQL ユーザーと権限の管理について説明します。ご参考までに、詳細は...