ホームページ > 記事 > ウェブフロントエンド > text_html/css_WEB-ITnoseの半分のスタイルコードをCSSで設定する例
text_html/css_WEB-ITnoseの半分のスタイルコードをCSSで設定する例
- WBOYオリジナル
- 2016-06-24 11:29:091297ブラウズ
CSS を使用してテキストの半分のスタイル コードを設定する:
通常、テキストのスタイルを設定する場合、効果はテキスト全体に適用されます。たとえば、色を設定すると、テキスト全体の色が変わります。方法は次のとおりです。 困っている友達に助けを届けたいと考えて、テキストの一部に指定したスタイルを設定します。
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.antzone{ position:relative; display:inline-block; font-size:80px; color:black; overflow:hidden; white-space:pre; }.antzone:before{ display:block; z-index:1; position:absolute; top:0; left:0; width:50%; content:attr(data-content); overflow:hidden; color:#f00;}</style></head><body><span class="antzone" data-content="s">s</span><span class="antzone" data-content="o">o</span><span class="antzone" data-content="f">f</span><span class="antzone" data-content="t">t</span> </body></html> 上記のコードは、文字列内のテキストの半分のみが赤色に設定されています。その実装原理を簡単に説明します。
1. 実装原則:
効果は非常にクールに見えますが、原理は実際には非常に単純です。:before 疑似要素セレクターを content 属性と組み合わせて使用し、span 要素に疑似要素を追加して設定します。スパンする要素のコンテンツ。要素の data-content 属性値を指定し、元のspan要素をカバーする絶対位置に設定し、幅を元のspan要素の半分にして、これを色に設定します。要素内のフォントにより、要件が達成されます。これは 1 つのテキストに見えますが、実際には 2 つのテキストが重ね合わされて覆われた効果です。
2. 関連資料:
1.:before、CSS 疑似オブジェクト セレクター before/E::before の章を参照してください。
2. content 属性については、CSS content 属性の章を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=14781
詳細については、以下を参照してください: http://www.softwhy.com/divcss/