CSS3-文字背影水波浪效果

CSS3-文字背影水波浪效果

html:

<section class="container">
<h1>CSS3文字背影水波浪效果</h1>
</section>

css:

*{
margin: 0;
padding: 0;
list-style: none;
font-style: normal;
}
html,body{
width: 100%;
height: 100%;
}
body{
background: #262626;
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.container h1{
text-transform: uppercase;
font-size: 10em;
color: rgba(255,255,255,0.1);
background-image: url('./img/wave.png');
background-repeat: repeat-x;
background-size: 200px auto;
/* 背景图裁切 */
-webkit-background-clip: text;
animation: animate-wave 15s linear infinite;
}
@keyframes animate-wave{
0%{
background-position: 0 80px;
}
40%{
background-position: 800px -50px;
}
80%{
background-position: 1800px 10px;
}
100%{
background-position: 2400px 80px;
}
}

说明：

背景素材图，波浪的两个端点的钢笔点要在一条水平线上，如下所示：

文字背影水波浪，是通过调整背景图的 水平方向上---向上移动，向下移动