ホームページ > 記事 > ウェブフロントエンド > css3を使ってフォントの内部発光効果を実現する方法（詳細解説）
css3を使ってフォントの内部発光効果を実現する方法（詳細解説）
- 坏嘻嘻オリジナル
- 2018-09-28 10:54:117322ブラウズ
インターネットの発展が進む今日の社会では、Web ユーザー エクスペリエンスに対する人々の要求がますます高まっており、その結果、シャドウ エフェクトやグロー エフェクトなどの特殊効果の派生物がさらに増えています。この記事では、 CSS3 を使用してフォントのライティングの特殊効果を実現する方法を紹介します。必要な方は参考にしていただければ幸いです。
css3 を使用してフォントのグロー効果を実現する原理
まず、必要なテキストを入力する必要があります。特殊効果を追加します。
-
次に、理解する必要があるのは、CSS3 自体には発光効果属性はありませんが、text-shadow 属性を通じて発光効果を実現できるということです。 text-shadow 属性。
f35d6e602fd7d0f0edfa6f7d103c1b57text-shadow 属性の基本構文: text-shadow: h-shadow v-shadow ブラー カラー;
2cc198a1d5eb0d3eb508d858c9f5cbdbh-shadow: 水平方向のシャドウ位置 (シャドウの水平オフセット)、負の値にすることもできます。 v-shadow: 垂直方向の影の位置 (影の垂直方向のオフセット)。負の値にすることもできます。
5bdf4c78156c7953567bb5a0aef2fc53blur: シャドウのブラー距離 (デフォルトは 0)。
23889872c2e8594e0f446a471a78ec4ccolor: 影の色。通常、デフォルトはフォントの色です。
43ad812d3a971134e40facaca816c822さらに、text-shadow の別の機能、つまり複数のシャドウを同時に設定することもできます (複数のシャドウを区切るにはカンマを使用します)。この機能は今のところあまり紹介されません。
#css3 を使用してフォント ライティング効果を実現する例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发光字体</title>
<style type="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all 0.1s;
text-shadow:1px 1px 1px #00FF00;}
p:hover{ text-shadow:6px 6px 6px #00FF00;}
</style>
</head>
<body><p align="center">PHP中文网</p>
</body>
</html>
フォント ライティング効果図に示すとおりです。
以上がcss3を使ってフォントの内部発光効果を実現する方法（詳細解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。