欢送关注我的公众号：前端侦探
明天真是太热了，不信你看题目
今҈天҈真҈是҈热҈化҈了҈！
也能够查看上面截图
置信大家最近都能看到这样“热化了”的题目。那么，这是如何实现的呢？CSS 能够实现相似的成果吗？一起看看吧
一、菊花字符 488
首先，这类字符成果实现很简略，实质就是插入了一个非凡的“花漾字符”，能够在管制台上看到它的实在外貌
这里长的像菊花一样的字符十分非凡，失常状况下是打不进去的，只能通过复制或者一些非凡的输入法输出。咱们还能够将这个字符串拆散开来，如下
通过转换，这里借助了张鑫旭的在线转换工具，能够看到Unicode值是488
所以，在 HTML 中，还能够通过转义字符҈来手动输出
<h2>今҈天҈真҈是҈热҈化҈了҈~</h2>同样能够失去雷同的成果
二、通过伪元素生成
如果心愿页面展现的是“热化了”款式，然而复制进去的是失常的文字，该如何解决呢？
首先，须要将文字拆分开来，用标签包裹，如下
[...'明天真是热化了'].map(el => `<span>${el}</span>`).join('')后果如下
<h2><span>今</span><span>天</span><span>真</span><span>是</span><span>热</span><span>化</span><span>了</span></h2>而后，通过伪元素在每个标签前面增加一个菊花字符\488
span::after{
content:'\488'
}看，成果进去了
这样下来，页面中就不会有特殊字符了，对搜索引擎也更为敌对
三、通过文本装璜生成
下面通过伪元素的形式简直和原有实现形式一样，然而须要将每个字符都包裹一层标签，稍微繁琐。有没有方法不拆分呢？也是能够模仿实现的，那就是借助文本装璜属性：text-emphasis
有趣味的能够参考张鑫旭的这篇文章：应用CSS text-emphasis对文字进行强调装璜
假如 HTML 是这样的
<p>明天真是热化了~</p>而后设置装璜属性，文案就是方才那个菊花字符\488
p{
text-emphasis: '\488';
}成果如下
当初有两个问题来了
- 如何扭转菊花字符的大小？
- 如何让这个菊花字符叠加在题目上？
text-emphasis的大小是跟原文本字体和大小无关的，在中文字符下，大略是文本的 1/2 左右，所以为了不影响原题目大小，这里能够用伪元素生成一份雷同的文案，具体做法是
<p title="明天真是热化了~">明天真是热化了~</p>而后用伪元素动静生成属性，文本装璜也放在伪元素上，并且设置相对定位
p::before{
position: absolute;
content: attr(title);
text-emphasis: '\488';
}为了辨别，伪元素给了非凡的色彩
而后，将伪元素字号放大为原来的 2 倍
p::before{
position: absolute;
content: attr(title);
text-emphasis: '\488';
font-size: 200%;
}当初文字因为太大换行了，没关系，能够放大字符间距，用letter-spacing实现
p::before{
position: absolute;
content: attr(title);
text-emphasis: '\488';
font-size: 200%;
letter-spacing: -.5em;
}上面把伪元素生成的题目暗藏起来，能够设置文本色彩为通明。默认状况下，装璜色彩是追随文字色彩，所以可能还须要额定设置
p::before{
text-emphasis: '\488' #000;
color: transparent;
}在这里，我更举荐用色彩填充的形式实现
p::before{
-webkit-text-fill-color: transparent;
}成果如下
这样的益处是能够放弃原有色彩的继承性，比方在外层改个色彩
以上残缺代码能够拜访在线 demo：CSS hot-word（codepen.io）
四、总结一下
以上就是全部内容了，次要介绍了一种非凡的字符，以及在 HTML 中的利用，而后通过 CSS 的形式模仿实现了相似的成果，上面总结一下实现要点
- 热化了的文字实质上是插入了一个特殊字符
- 这个特殊字符的 Unicode 值是
488 - 能够通过伪元素将这个特殊字符插入到 HTML 中，不过须要将每个字符用标签包裹
- 还能够通过文本装璜属性
text-emphasis生成特殊字符 - 文本装璜的色彩默认继承自文字色彩
当然，文本装璜在这里并不是一个很完满的办法，不能换行，对英文反对也有问题，对特定内容倡议采纳第一种伪元素生成的办法。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探
发表回复