css3を使ってフォントの内部発光効果を実現する方法（詳細解説）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3を使ってフォントの内部発光効果を実現する方法（詳細解説）

坏嘻嘻

Sep 28, 2018 am 10:54 AM

css3

インターネットの発展が進む今日の社会では、Web ユーザーエクスペリエンスに対する人々の要求がますます高まっており、その結果、シャドウエフェクトやグローエフェクトなどの特殊効果の派生物がさらに増えています。この記事では、 CSS3 を使用してフォントのライティングの特殊効果を実現する方法を紹介します。必要な方は参考にしていただければ幸いです。

css3 を使用してフォントのグロー効果を実現する原理

まず、必要なテキストを入力する必要があります。特殊効果を追加します。
次に、理解する必要があるのは、CSS3 自体には発光効果属性はありませんが、text-shadow 属性を通じて発光効果を実現できるということです。 text-shadow 属性。

text-shadow 属性の基本構文: text-shadow: h-shadow v-shadow ブラーカラー;

h-shadow: 水平方向のシャドウ位置 (シャドウの水平オフセット)、負の値にすることもできます。 v-shadow: 垂直方向の影の位置 (影の垂直方向のオフセット)。負の値にすることもできます。

blur: シャドウのブラー距離 (デフォルトは 0)。

color: 影の色。通常、デフォルトはフォントの色です。

さらに、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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am 11:20 AM

今週のラウンドアップ：Firefoxは錠前屋のような力を獲得し、Samsung＆＃039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています

毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am 11:15 AM

今週のラウンドアップ：Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します

CSSカスタムプロパティを使用したスコープのパワー（および楽しい）Apr 14, 2025 am 11:11 AM

おそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります：それらは本当にカスタムプロパティと呼ばれます、あなたは設定します

私たちはプログラマーですApr 14, 2025 am 11:04 AM

建物のウェブサイトはプログラミングです。 HTMLとCSSの作成はプログラミングです。私はプログラマーです。ここでCSS-Tricksを読んでいる場合、あなたは＆＃039;

サイトから未使用のCSSをどのように削除しますか？Apr 14, 2025 am 10:59 AM

ここに＆＃039;私が前もって知るのが好きなこと：これは難しい問題です。あなたがここに上陸した場合、あなたはあなたが伝えることができるツールを指し示すことを望んでいるので、あなたが＆＃039;

ピクチャーインピクチャーWeb APIの紹介Apr 14, 2025 am 10:57 AM

Picture-in-Pictureは、2016年にMacos SierraをリリースしたSafariブラウザでWebに初めて登場しました。ユーザーがポップできるようになりました。

ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法Apr 14, 2025 am 10:56 AM

Gatsbyは、画像の処理と処理の素晴らしい仕事をしています。たとえば、手動で画像の最適化で時間を節約するのに役立ちます

ああ、パディングの割合は親要素の幅に基づいていますApr 14, 2025 am 10:55 AM

私は今日、私の頭の中で完全に間違っていたことをパーセンテージベース（％）のパディングについて学びました！パディングの割合はに基づいているといつも思っていました

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。