乐趣区

关于html:今天有点热

jiezi

1. 在咱们夏天天气炎热的时候，咱们总会感叹天气的极其，那么咱们又如何在页面上表白这种对天气炎热的埋怨感呢，例如：

2. 那咱们该怎么样去显示出这种成果呢？

A. 应用菊花字符 488
Ǩ
行代码：

<h2> 今 &#x488; 天 &#x488; 真 &#x488; 是 &#x488; 热 &#x488; 死 &#x488; 了 &#x488;</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;
  }

最初示意图：

退出移动版