cssはどのように1つの文字の2種類の色のコードのインスタンスを実現します
3716 ワード
cssはどのように1つの文字の2つの色のコードの例を実現します:実際の応用の中でテキストの効果を設定するのが比較的にかっこいいかもしれません.1文字を2色に設定する効果があり、普通の方法では実現できないに違いない.次に、この機能を実装するコードの例を説明します.
上のコードは私たちの要求を実現しました.次に、その実現過程を簡単に紹介します.一.実現原理:原理は非常に簡単で、before擬似オブジェクトセレクタを通じて、span要素に擬似要素を追加します.この擬似要素を絶対位置決めに設定すると、元のspan要素の内容を上書きできます.次に、この設定を元のspan要素と同じテキスト内容にし、色を設定し、最後に偽要素の幅を制御することで文字の変色範囲を設定します.二.関連読書:(1).beforeはCSSの擬似オブジェクト選択子before/E::beforeの章を参照できます.(2).相対位置決めと絶対位置決めはcssのabsolute絶対位置決めとrelative相対位置決めの違いの章を参照することができる.(3).attr()はCSSの関数取値attr()の章を参照できます.(4).contentはCSSのcontentプロパティの章を参照できます.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=18241
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/
<!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>上のコードは私たちの要求を実現しました.次に、その実現過程を簡単に紹介します.一.実現原理:原理は非常に簡単で、before擬似オブジェクトセレクタを通じて、span要素に擬似要素を追加します.この擬似要素を絶対位置決めに設定すると、元のspan要素の内容を上書きできます.次に、この設定を元のspan要素と同じテキスト内容にし、色を設定し、最後に偽要素の幅を制御することで文字の変色範囲を設定します.二.関連読書:(1).beforeはCSSの擬似オブジェクト選択子before/E::beforeの章を参照できます.(2).相対位置決めと絶対位置決めはcssのabsolute絶対位置決めとrelative相対位置決めの違いの章を参照することができる.(3).attr()はCSSの関数取値attr()の章を参照できます.(4).contentはCSSのcontentプロパティの章を参照できます.
原文の住所は次のとおりです.http://www.softwhy.com/forum.php?mod=viewthread&tid=18241
詳細については、次の項目を参照してください.http://www.softwhy.com/divcss/