共计 978 个字符,预计需要花费 3 分钟才能阅读完成。
1. 在咱们夏天天气炎热的时候,咱们总会感叹天气的极其,那么咱们又如何在页面上表白这种对天气炎热的埋怨感呢,例如:
2. 那咱们该怎么样去显示出这种成果呢?
A. 应用菊花字符 488Ǩ
行代码:
<h2> 今 ҈ 天 ҈ 真 ҈ 是 ҈ 热 ҈ 死 ҈ 了 ҈</h2>
B. 通过伪元素生成:
首先要把文字拆分开来,如何包裹上一个个 <span></span> 标签
[...'明天真是热死了'].map(el=>`<span>${el}</span>`).join('')
span::after{content:'\488'}
这样子下来,页面当中就不会有特殊字符了,对搜索引擎也更敌对了
C. 通过文本装璜生成
应用 text-emphasis, 其大小为原文本字体大小的 1 /2,将来不影响原题目的大小,能够利用伪元素生成一份雷同的文案,具体做法如下:<p title="明天真是热死了"> 明天真是热死了 </p>
文本装饰业放在伪元素上,并且设置相对定位
p::before{
position: absolute;
content:attr(title);
text-emphasis: '\488';
}
而后放大字体,放大两倍:
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: -0.5em;
}
示意图:
最初要将多余的文本暗藏起来:
-webkit-text-fill-color:transparent;
p::before{
position: absolute;
content:attr(title);
text-emphasis: '\488';
font-size: 200%;
letter-spacing: -0.5em;
-webkit-text-fill-color:transparent;
}
最初示意图:
正文完