<分区>
<分区>
我正在制作一个网站的介绍,我想让文本通过 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/