html获取字段前⼏个字母，纯CSS实现取字符串的第⼀个字符实
现⽂字图标功能
如何通过CSS实现⽂字图标
/*图标样式*/
.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;
}
技术是基础
能⼒是关键
沟通最重要
通⽤接⼝
效果预览
这样基本效果实现出来，但是还是差⼀点。怎么通过实现图标背景⾊跟随⽂字
如何实现看这⾥，下⾯代码仅⽤于该⽂章的⽰例，真实使⽤需要根据实际情况做调整var titles = ["技术是基础", "能⼒是关键", "沟通最重要", "通⽤接⼝"];
var html = "";
for (let i = 0; i < titles.length; i++) {
const title = titles[i];css特效文字
const color = extractColorByName(title);
html += '
{1}
'.replace('{0}', color).replace('{1}', title);
}
// 输出
document.write(html);
/**
* 根据名字提取颜⾊
* @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);
}
实现后的效果如下
最终附上案列代码
/*图标样式*/
.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;
}
var titles = ["技术是基础", "能⼒是关键", "沟通最重要", "通⽤接⼝"]; var html = "";
for (let i = 0; i < titles.length; i++) {
const title = titles[i];
const color = extractColorByName(title);
html += '
{1}
'.replace('{0}', color).replace('{1}', title);
}
/
/ 输出测试HTML
document.write(html);
/**
* 根据名字提取颜⾊
* @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);
}
总结
到此这篇关于纯CSS实现取字符串的第⼀个字符实现⽂字图标功能的⽂章就介绍到这了，更多相关css实现⽂字图标内容请搜索脚本之家以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持脚本之家！