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

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 の利点

推薦する

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

WeChatアプレットは記録機能を実装します

この記事では、WeChatアプレットのレコード機能を実装するための具体的なコードを参考までに紹介しま...

ウェブデザインのグラフィック構成と組版機能の紹介

すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...

ネイティブ js が携帯電話のプルダウン更新を模倣

この記事では、携帯電話のプルダウンリフレッシュを模倣したjsの具体的なコードを参考までに共有します。...

MySQL アカウント情報をエレガントにバックアップする方法

序文:最近、インスタンスの移行の問題に遭遇しました。データの移行後、データベースのユーザーと権限も移...

Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

MySQLセグメンテーション関数substring()の具体的な使用法

MySQL には、主に left()、right()、substring()、substring_i...

ElementUIはカスケードセレクタを実装します

この記事の例では、カスケードセレクターを実装するためのelementUIの具体的なコードを参考までに...

テーブル編集操作を実現する js+Html

この記事では、テーブルの編集操作を実現するためのjs+Htmlの具体的なコードを参考までに共有します...

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

Dockerはコード検出プラットフォームSonarQubeを構築し、Mavenプロジェクトのプロセスを検出します

1 はじめに優れたコーディング習慣は優れたプログラマーが備えるべき資質ですが、コードの品質を保証する...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...