css實現一個文字兩種顏色程式碼例項
分享一段程式碼例項,它實現了同一個文字兩種顏色的功能。
左右分別是兩種顏色,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } .half { position: relative; display: inline-block; color: #00f; font-size: 72px; } .half:before { display: block; position: absolute; left: 0; top: 0; width: 50%; content: attr(data-content); overflow: hidden; color: #ff2d51; } </style> </head> <body> <span class="half" data-content="螞">螞</span> <span class="half" data-content="蟻">蟻</span> <span class="half" data-content="部">部</span> <span class="half" data-content="落">落</span> </body> </html>
上面的程式碼實現了我們的要求,程式碼相對比較簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).content可以參閱css content一章節。
(2).attr()可以參閱CSS attr()一章節。
相關文章
- CSS設定一個文字兩種顏色CSS
- CSS3實現的滑鼠懸浮文字顏色漸變效果程式碼例項CSSS3
- css文字顏色漸變的3種實現CSS
- 兩行 CSS 程式碼實現圖片任意顏色賦色技術CSS
- css設定placeholder字型顏色程式碼例項CSS
- javascript文字彩虹式顏色漸變效果程式碼例項JavaScript
- js隨機顏色例項程式碼JS隨機
- css滑鼠懸浮顏色動態填充效果程式碼例項CSS
- CSS顏色程式碼CSS
- CSS 隔行變色程式碼例項CSS
- 設定placeholder顏色程式碼例項
- css3實現的文字下滑出現效果程式碼例項CSSS3
- 網頁點選選擇設定文字不同顏色程式碼例項網頁
- css實現梯形程式碼例項CSS
- css實現的多行文字垂直居中效果程式碼例項CSS
- CSS3實現的禁止文字選中程式碼例項CSSS3
- css實現的多行文字垂直居中程式碼例項CSS
- css3實現的文字陰影效果程式碼例項CSSS3
- CSS實現的背景圖片替代顏色程式碼CSS
- css顏色程式碼大全CSS
- css實現的背景透明文字不透明例項程式碼CSS
- css實現對聯程式碼例項CSS
- js實現文字框提示程式碼例項JS
- 簡單說 通過CSS實現 文字漸變色 的兩種方式CSS
- CSS文字模糊效果程式碼例項CSS
- css禁止文字縮放程式碼例項CSS
- 兩個文字框同步輸入內容程式碼例項
- CSS例項:滑鼠滑過超級連結文字時改變背景顏色CSS
- css顏色程式碼對照CSS
- jQuery實現的隔行變色程式碼例項jQuery
- canvas繪製矩形並填充顏色程式碼例項Canvas
- 實現多個文字框輸入同步效果程式碼例項
- CSS實現的滑鼠滑過改變連結文字例項程式碼CSS
- css兩列等高程式碼例項CSS
- CSS3文字漸現效果程式碼例項CSSS3
- 純CSS實現四種方式文字反差色效果CSS
- css實現矩形切角效果程式碼例項CSS
- css3實現滑鼠懸浮出現一個說明層程式碼例項CSSS3