今天有点热

1.在我们夏天天气炎热的时候,我们总会感叹天气的极端,那么我们又如何在页面上表达这种对天气炎热的抱怨感呢,例如:

image.png

2.那我们该怎么样去显示出这种效果呢?

A.使用菊花字符488
Ǩ
行代码:

今҈天҈真҈是҈热҈死҈了҈

B.通过伪元素生成:
首先要把文字拆分开来,如何包裹上一个个标签

[...'今天真是热死了'].map(el=>`${el}`).join('')  
span::after{content:'\488'}

这样子下来,页面当中就不会有特殊字符了,对搜索引擎也更友好了

C.通过文本装饰生成
使用text-emphasis,其大小为原文本字体大小的1/2,未来不影响原标题的大小,可以利用伪元素生成一份相同的文案,具体做法如下:

今天真是热死了

文本装饰业放在伪元素上,并且设置绝对定位

p::before{
    position: absolute;
    content:attr(title);
    text-emphasis: '\488';
}

然后放大字体,放大两倍:

  p::before{
      position: absolute;
      content:attr(title);
      text-emphasis: '\488';
      font-size: 200%;
  }

示意图变成这样子了:
image.png
现在会发现文字太大,然后字符间距加大了,所以要缩小字符间距,可以用letter-spacing实现

 p::before{
      position: absolute;
      content:attr(title);
      text-emphasis: '\488';
      font-size: 200%;
      letter-spacing: -0.5em;
  }

示意图:
image.png
最后要将多余的文本隐藏起来:

-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;
  }

最后示意图:
image.png

你可能感兴趣的:(htmlcss)