主页 / 问题 / 1235494
Accepted
shisui
Asked:2022-01-24 20:47:20 +0800 CST2022-01-24 20:47:20 +0800 CST

论坛文字样式css

  • 772

我想在文本中添加诸如“飞溅”之类的内容。比如白色的文字和红色的溅在上面，但我不知道怎么写。出现的最大值是梯度。

我附上了带有白色阴影的白色文本的代码：

p {
  background: linear-gradient(35deg, #ffffff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 9px #ffffff;
}
css

1 个回答

  1. Best Answer

    在纯 CSS 上，不使用图像作为字符背景，这很难做到。但是 SVG 做得很好。

    运行示例，移动滑块。达到所需结果后，从底部字段复制过滤器代码。

    .splash {
  font: bold 100px "Arial Black";
  /* background: linear-gradient(35deg, #f00, #f00); */
  filter: url(#splash) drop-shadow(0 0 1px #f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff;
  /* -webkit-text-stroke: 1px #f00; */
  /* text-shadow: 0 0 1px #f00; */
}
    <div class="splash">SPLASH</div>

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="splash">
    <feTurbulence type="turbulence" baseFrequency="0.25" numOctaves="13" result="turbulence"/>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="26" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<!-- Only for demo --> <br>baseFrequency <input type="range" min="0.01" max="1.0" step="0.01" value="0.25" oninput="document.getElementById('splash').children[0].setAttribute('baseFrequency', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> scale <input type="range" min="1" max="100" step="1" value="26" oninput="document.getElementById('splash').children[1].setAttribute('scale', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> Код: <input id="code" onfocus="this.select()">

    一些注释的 CSS 属性（或它们的组合）可能会更好地工作。

    • 2

相关问题