jquery - 用 CSS 挖空文本?

标签 jquery html css svg

<分区>

我正在制作一个网站的介绍,我想让文本通过 mask 切到它后面的背景中。我想要的一个例子是 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;
}

最佳答案

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

关于jquery - 用 CSS 挖空文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35675550/

上一篇:javascript - 仅在某些 PC 中出现奇怪的错位

下一篇:html - 为什么没有边距 :auto tag work on the "title" div?

相关文章:

jquery - 如何使用 jQuery 更改链接中的文本

jquery - 使用所选 jquery 添加事件后将事件添加到按钮

html - 如何排列要打印的 html 文档,这样页面就不会被截断?

javascript - 对 p 使用最小高度以获得跨浏览器的相同高度

html - 如何为地铁用户界面创建具有响应高度的网页?

jquery - li 标记奇数,当我们使用分页时偶数代码不起作用

javascript - 使用 twitter bootstrap 在选项卡中加载新页面

jquery - 如何使 hc-sticky 插件引用其容器

html - 如何访问层次结构顶部的文件?

javascript - 检查 formdata 对象键是否存在