css_html/css_WEB-ITnose のテキストに 2 つのカラーコードを実装する方法の例-htmlチュートリアル-php.cn

css_html/css_WEB-ITnose のテキストに 2 つのカラーコードを実装する方法の例

WBOY

リリース： 2016-06-24 11:26:58

オリジナル

2318 人が閲覧しました

2 つのカラーコードを使用してテキストを実装する方法の CSS 例:
実際のアプリケーションでは、テキスト効果をよりクールに設定する必要がある場合があります。
効果の 1 つは、テキストを 2 色に設定することですが、これは通常の方法では絶対に実現できません。
この関数を実装するコードの例を共有しましょう:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.antzone{  display:inline-block;  font-size:80px;  line-height:80px;  color:#000;  position:relative;  overflow:hidden;  white-space:pre;}.antzone:before{  position:absolute;  left:0;  top:0;  color:#f00;  display:block;  width:30%;  content:attr(data-content);  overflow:hidden;}</style></head><body><span class="antzone" data-content="蚂">蚂</span><span class="antzone" data-content="蚁">蚁</span><span class="antzone" data-content="部">部</span><span class="antzone" data-content="部">部</span></body></html>

ログイン後にコピー

上記のコードは、その実装プロセスを簡単に紹介します。
1. 実装原理:
原理は非常に単純で、:before 擬似オブジェクトセレクターを介して擬似要素をspan要素に追加することです。
元のspan要素のコンテンツをカバーできるように、この疑似要素を絶対配置に設定します。
次に、これに元のspan要素と同じテキストコンテンツを与え、色を設定します。最後に、擬似要素の幅を制御してテキストの色の範囲を設定します。
2. 関連資料:
(1).:before、CSS 疑似オブジェクトセレクターの before/E::before の章を参照してください。
(2). 相対配置と絶対配置については、CSS における絶対配置と相対配置の違いの章を参照してください。
(3).attr() は CSS 関数値 attr() の章を参照できます。
(4).content は CSS コンテンツ属性の章を参照できます。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18241

詳細については、以下を参照してください: http://www.softwhy.com/divcss/