我正在尝试使用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*/
}
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div class="box">
<h1 class="big">TRY THIS</h1>
</div>
<!--end of box-->
</div>
<!--end …Run Code Online (Sandbox Code Playgroud)如何使用CSS和JavaScript显示带有"线性擦除"效果的文本.怎么做?
<p>Text linear wipe </p>
Run Code Online (Sandbox Code Playgroud)