我正在介绍一个网站的介绍,我想通过掩码将文本剪切到背后的背景。我想要的一个例子是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;
}
答案 0 :(得分:-2)
以 div 宽度为零开始,然后使用jQuery动画将其慢慢展开为完整大小。