我正在尝试使用 CSS 和/或 JavaScript 模仿下面显示的动画。我已经创建了开始步骤,但不知道如何为放大部分设置动画。
body {
background-color: #222;
}
.container {
background-image: url(test.jpg);
height: 96vh;
width: 100%;
}
.box {
background-color: #fff;
height: 98vh;
width: 100%;
}
.big {
font-size: 17vw;
background: url(http://viralsweep.com/blog/wp-content/uploads/2015/02/unsplash.jpg) 33px 659px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
padding-top: 24vh;
margin-top: 0;
text-align: center;
animation: opac 2s infinite;
}
@keyframes opac {
0%, 100% {
/*rest the move*/
}
50% {
/*move some distance in y position*/
}
}
<div class="container">
<div class="box">
<h1 class="big">TRY THIS</h1>
</div>
<!--end of box-->
</div>
<!--end of conatiner-->
最佳答案
一种可能性,使用 2 个元素,一个用于图像,另一个用于文本,并使用混合模式实现透明:
请注意,IE 或 Edge 不支持混合模式
body,
html {
width: 100%;
height: 100%;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: url(http://placekitten.com/1000/600);
background-size: cover;
}
.box {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background-color: white;
overflow: hidden;
mix-blend-mode: lighten;
}
.big {
position: absolute;
left: 20%;
top: 30%;
font-size: 10vw;
color: black;
animation: zoom 4s infinite;
}
@keyframes zoom {
from {
transform: scale(0.2, 0.2);
}
to {
transform: scale(4, 4);
}
}
<div class="container">
<div class="box">
<div class="big">TRY THIS</div>
</div>
</div>
关于javascript - 如何为背景图像上的文本剪切动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39646076/