我希望有一个背景图像,该背景图像仅通过敲除文本显示,然后使该文本从页面顶部到页面底部进行动画处理,以显示背景图像随文本移动的不同部分。
我知道如何制作挖空文字
#screen1 h1 {
display:block;
margin: auto;
font-family: 'proxima-nova', sans-serif;
background-image: url('../img/my-image.jpg');
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 12rem;
font-weight: 800;
}
但是我想要的更像是#screen1上的背景图像,只显示出敲除文本。因此,当对动画文本进行动画处理时,它会显示背景图像的不同部分。
html:
<div id="screen1" >
<div style="">
<h1>MY TEXT</h1>
</div>
</div>
CSS:
#screen1 {
background: url(../img/my-image.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
#screen1 h1 {
display:block;
margin: auto;
font-family: 'proxima-nova', sans-serif;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 12rem;
font-weight: 800;
}
但这仅显示背景图像。我感觉我已经接近了。
答案 0 :(得分:1)
我希望有一个背景图像,该背景图像仅通过敲除文本显示,然后使该文本从页面顶部到页面底部进行动画处理,以显示背景图像随文本移动的不同部分。
您可以在显示背景图像的同时为文本设置动画:
body {
margin: 0;
background-color: lightblue;
overflow: hidden;
}
h1 {
display: flex;
justify-content: center;
height: 100vh;
margin: auto;
font-family: 'proxima-nova', sans-serif;
background: url('https://placekitten.com/g/200/300') no-repeat;
background-size: cover;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 5rem;
line-height: 5rem;
font-weight: 800;
padding-top: 0;
animation: animate 5s linear infinite;
}
@keyframes animate {
to {
padding-top: calc(100vh - 6rem);
}
}
<h1>Text</h1>
您可以对标记进行相同的操作,将标记#screen1
和h1
嵌套在其中,方法是继承 h1
的背景,然后剪辑背景效果-请参见下面的演示
body {
margin: 0;
}
* {
box-sizing: border-box;
}
#screen1 {
background: url('https://placekitten.com/g/200/300') no-repeat, lightblue;
background-size: 0; /* don't show the background yet */
height: 100vh;
overflow: hidden;
}
#screen1>div {
background: inherit;
/* background size is still zero */
height: 100%;
}
#screen1 h1 {
display: flex;
justify-content: center;
margin: 0;
background: inherit;
/* now show the background */
background-size: cover;
font-family: 'proxima-nova', sans-serif;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 5rem;
line-height: 5rem;
font-weight: 800;
padding-top: 0;
animation: animate 5s linear infinite;
height: 100%;
}
@keyframes animate {
to {
padding-top: calc(100vh - 5rem);
}
}
<div id="screen1">
<div>
<h1>MY TEXT</h1>
</div>
</div>