text_html/css_WEB-ITnoseの半分のスタイルコードをCSSで設定する例-htmlチュートリアル-php.cn

text_html/css_WEB-ITnoseの半分のスタイルコードをCSSで設定する例

WBOY

リリース： 2016-06-24 11:29:09

オリジナル

1363 人が閲覧しました

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/