Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例

0. はじめに

2016 年 8 月 18 日今日、iPhone をスライドさせてロックを解除すると、プロンプトテキスト上で白いライトが点滅し、とてもクールな感じがすることに気付きました。そこで突然、マウスをテキスト上に置くと (指をシミュレート)、白いライトが点滅してテキストを照らすという効果を作ることに興味を持ちました。

1. アイデア

まず、「フォントを照らす」効果を実現するために、斜めの白色光を作成する必要があります。

この手順を完了すると、次のことは簡単です。つまり、最初に白い光が消え、次にマウスがフォントに移動すると、白い光が現れてフォント上を通過します。

2. 白色光の生成

上の写真からわかるように、白い光の端は白から黒に直接変化するのではなく、徐々に黒に変化します。したがって、この白色光を作成するときは、CSS でグラデーションを使用する必要があります。 <linear-gradient>

生産工程

まず、div を作成し、単純なデフォルトの中央揃えスタイルを設定します。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
  体{
    マージン: 0;	
  }
  div{
    幅: 700ピクセル;
    高さ: 200px;
    境界線: 1px 黒一色;
    マージン: 0 自動;
  }
</スタイル>
</head>
<本文>
  <div></div>
</本文>
</html>

実行結果:

2. グラデーションを設定します。

一定の傾斜角で「黒→白→黒」のグラデーションを設定します。

コード：

背景: -webkit-linear-gradient(-45deg,
  #000 100ピクセル、
  #FFF 140ピクセル、
  #FFF 220ピクセル、
  #000 260ピクセル);
/*角度は-45°に設定されています*/

この時点での実行結果は次のとおりです。

さらに、グラデーションの開始角度は次のように説明されます。

1. グラデーションの方向と角度が設定されていない場合、デフォルトのグラデーションは上から下になります。
2. グラデーションの方向が設定されている場合は、設定された方向に従います。
たとえば、<background: -webkit-linear-gradient(right,red,yellow，blue)> が設定されている
グラデーションの方向は右から左に赤、黄、青です。
3. 右上、右下、左下、左上を設定できます。これは、グラデーションが対応する 4 つの角から始まることを意味します。
4.角度を設定できます。線形グラデーション角度は、X 軸の負の半分から始まり、反時計回りにカウントされます。ここでの角度は -45° に設定されています。

そのため、左上から右下へと徐々に変化していきます。

3. 背景テキストの設定この時点で、「なぜ背景テキストの設定について別途説明する必要があるのか」という疑問を持つ人もいるかもしれません。

ここに微妙な罠があるからです！

ここでは具体的に何なのかは説明しませんが、具体的な現象については後ほど紹介します。

ここではまずフォント全般の設定をします。

フォントサイズ: 50px;
テキスト配置: 中央;
行の高さ: 200px;
色: 白;
/* 設定されたテキストは: ラララララララララ デマーシア! ！ */

4. 白色光のスライド効果

これについては特に言うことはありません。まず、白い光を消します。マウスを div 上に置くと、白い光が現れ、横に移動します。

直接：

背景位置: -1000px,0px;

効果：

えっと…えっと、何が起こっているんですか？ ?

まあ、背景は繰り返されます。ここでは必ずbackground-repeat: no-repeatを設定してください。（注：フォントは白なので、当面はテキストは表示されません）

動的疑似クラスを設定するには:

div:ホバー{
  背景位置: 1000px,0px;
  遷移:すべて5秒;
}

効果を出すために、ボディ全体の背景色を黒に設定しました。

効果としては、マウスが div に移動していない場合はテキストのみが表示されます。マウスが div 上に置かれると、白い光が通過します。

3.背景クリップ: テキスト

白い光は完成しましたが、私たちが想像していたものとは少し違いました。

私たちが望んでいるのは、テキストをレーザーのように飛び出させるのではなく、照らすことです。

そこで、今回はタグを使用する必要があります: <background-clip:text>

このタグの意味は、テキスト以外のすべての背景を削除できるということです。これにより、効果が達成されます。

ただし、多くのブラウザではブラウザプレフィックスがないとこのタグを認識できないため、このタグを使用する場合はブラウザプレフィックスを追加する必要があることに注意してください。

結果を見てみましょう。

何？！なぜ効果がないのでしょうか?私の白い光はどこにありますか？

この時点では、マウスをその上に移動しても何も起こらないことがわかります。白い光が点滅する現象が消えました！

本当に消えたんですか？

もちろん違います。ここには実際に白い光が存在しますが、テキストによって遮られているだけです。

先ほど設定テキストを別途説明した理由を覚えていますか?テキストの色だけを設定するだけではうまく機能しないからです。背景の白い光がテキストを通して見えるように、テキストに透明度を与える必要があります。

このとき、RGBA 方式を使用してテキストの色を設定し、テキストに一定の透明度を与える必要があります。

<color:rgba(255,255,255,0.1);>

このようにして、必要なフォントを照らす効果が得られます。 ( ^__^ )

全体のコードは以下に添付されています。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル>
		体{
			マージン: 0;
			背景: #000;
		}
		div{
			幅: 1000ピクセル;
			高さ: 200px;
			境界線: 1px 黒一色;
			マージン: 0 自動;
			フォントサイズ: 70px;
			テキスト配置: 中央;
			行の高さ: 200px;
			色:rgba(255,255,255,1);
			背景: -webkit-linear-gradient(-45deg,
				#000 100ピクセル、
				#FFF 140ピクセル、
				#FFF 220ピクセル、
				#000 260ピクセル);
			/*角度は-45°に設定されています*/
		背景位置: -1000px,0px;
		背景繰り返し: 繰り返しなし;
		 -webkit-background-clip: テキスト;
		}
		div:ホバー{
			背景位置: 1000px,0px;
			遷移:すべて5秒;
		}
	</スタイル>
</head>
<本文>
	<div>ラララララララデマーシア！ ！ </div>
</本文>
</html>

CSS3 で Apple 携帯電話のロック解除のフォントの輝き効果を実現する例についての記事はこれで終わりです。CSS3 Apple ロック解除のフォントの輝きに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: JSはカリキュラムタイムテーブルアプレット（スーパーカリキュラムタイムテーブルを模倣）を実装し、カスタムバックグラウンド機能を追加します

>>: MySQL における INSERT INTO SET の利点