您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)純CSS如何實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標(biāo)功能,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
如何通過CSS實現(xiàn)文字圖標(biāo)
/*圖標(biāo)樣式*/ .nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px; background-color: #b3b4c5; vertical-align: middle; overflow: hidden; font-size: 16px; text-indent: 8px; text-align: center; letter-spacing: 8px; color: #fff; word-break: break-all; }
<div class="nav-icon-normal">技術(shù)是基礎(chǔ)</div> <div class="nav-icon-normal">能力是關(guān)鍵</div> <div class="nav-icon-normal">溝通最重要</div> <div class="nav-icon-normal">通用接口</div>
效果預(yù)覽
這樣基本效果實現(xiàn)出來,但是還是差一點。怎么通過實現(xiàn)圖標(biāo)背景色跟隨文字
可以看這篇Js 根據(jù)名字提取顏色值
如何實現(xiàn)看這里,下面代碼僅用于該文章的示例,真實使用需要根據(jù)實際情況做調(diào)整
var titles = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"]; var html = ""; for (let i = 0; i < titles.length; i++) { const title = titles[i]; const color = extractColorByName(title); html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title); } // 輸出 document.write(html); /** * 根據(jù)名字提取顏色 * @param name 名字 */ function extractColorByName(name) { var temp = []; temp.push("#"); for (let index = 0; index < name.length; index++) { temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16)); } return temp.slice(0, 5).join('').slice(0, 4); }
實現(xiàn)后的效果如下
最終附上案列代碼
<!DOCTYPE html> <html lang="en"> <head> <style> /*圖標(biāo)樣式*/ .nav-icon-normal { width: 32px; height: 32px; line-height: 33px; display: inline-block; border-radius: 6px; background-color: #b3b4c5; vertical-align: middle; overflow: hidden; font-size: 16px; text-indent: 8px; text-align: center; letter-spacing: 8px; color: #fff; word-break: break-all; } </style> </head> <body> <script type="text/javascript"> var titles = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"]; var html = ""; for (let i = 0; i < titles.length; i++) { const title = titles[i]; const color = extractColorByName(title); html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title); } // 輸出測試HTML document.write(html); /** * 根據(jù)名字提取顏色 * @param name 名字 */ function extractColorByName(name) { var temp = []; temp.push("#"); for (let index = 0; index < name.length; index++) { temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16)); } return temp.slice(0, 5).join('').slice(0, 4); } </script> </body> </html>
關(guān)于“純CSS如何實現(xiàn)取字符串的第一個字符實現(xiàn)文字圖標(biāo)功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。