SVG淘汰赛文字

最新推荐文章于 2024-11-13 08:41:42 发布

cunqu9743

最新推荐文章于 2024-11-13 08:41:42 发布

阅读量92

点赞数

文章标签： css java html css3 html5

这里的想法是想象三层彼此叠放，其中顶层用于在第二层中切出形状以显示第三层。

如果上图顶层的文本是我们要从第二层切掉的形状，则下图说明了剔除文本的概念。

SVG片段

这里是一个片段，建立底层（ .knockout ），该基因敲除文本，就会发现，中间层（ .knockout-text-bg ），我们正在切割出来，顶层（ .knockout-text ），其包含SVG文本，该文本将用作遮罩以剪切出第二层。

<div class="knockout">
  
  <svg class="knockout-text-container" width="100%" height="100%">
    
    <rect class="knockout-text-bg" width="100%" height="100%" fill="#000" x="0" y="0" fill-opacity="1" mask="url(#knockout-text)" />
    
    <mask id="knockout-text">
      <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
      <text x="50%" y="50%" fill="#000" text-anchor="middle">Knock Out Text</text>
    </mask>
    
  </svg>
  
</div>

在此示例中， <text>坐标完全是任意的，可以进行调整以适合所添加文本的实际大小和位置。

另外， fill在第二层的是黑色和fill顶层的是白色的。面具就是这样工作的：白色与黑色形成了完美的对比，并且会隐藏黑色部分。我们可以使顶层具有完全不同的颜色，并且它不会完全隐藏黑色，但允许其中的一部分滑过。

CSS样式

剩下的就是CSS样式。例如，我们可以在底层添加背景渐变并设置字体大小，以获得更多的戏剧性效果。

.knockout {
  /* Ensure the bottom layer is full screen */
  height: 100vh;
  width: 100%;
  /* Add a colorful texture and cutom font-styling */
  background-image: linear-gradient(to left, #ff4e50 , #f9d423);
  text-transform: uppercase;
}

/* Knockout text font sizing for each line */

text:nth-child(2) {
  font-size: 5em;
}

text:nth-child(3) {
  font-size: 5.1em;
}

text:nth-child(4) {
  font-size: 15em;
}

请参阅CodePen上的Geoff Graham（ @geoffgraham ）撰写的Pen SVG淘汰文本。