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