用CSS敲出文字?

时间:2016-02-27 21:17:41

标签: jquery html css svg

我正在介绍一个网站的介绍,我想通过掩码将文本剪切到背后的背景。我想要的一个例子是here,但他们使用SVG来实现效果。我几乎完全是SVG的新手,想知道是否有另一种方法可以通过CSS实现这一目标。如果没有,我绝对可以使用任何建议以最简单的方式为新手创建SVG文本。

My site with complete html/css/jQuery code can be seen in this fiddle.

html中的基本介绍掩码和文本布局是

  <div id="intro">
    <div id="mask"></div>
    <div id="introText">
      <p>time to get away...</p>
    </div>
  </div>

相应的CSS是

#mask {
 opacity:0.8;
 background-color: rgba(0, 131, 255, 0.9);
 position:fixed;
 width:100%;
 height:100%;
 top:0px;
 left:0px;
 z-index:1000;
}

#introText {
  color: white;
  opacity: 0;
  text-align: center;
  margin-top: 33%;
  font-size: 6em;
}

1 个答案:

答案 0 :(得分:-2)

div 宽度为零开始,然后使用jQuery动画将其慢慢展开为完整大小。