上图效果要先复制第13次修改的备忘录,再另外保存下面的代码:
<!DOCTYPE html>
<html lang="zh">
<a class="a-href a-h">水波浪标题</a>
<style>
.h1-div {
/* 隐藏 */
display: none;
}
h1 {
display: inline;
color: rgb(155, 52, 52);
position: absolute;
font-size: 6rem;
}
h1:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px rgb(13, 118, 222);
}
h1:nth-child(2) {
color: rgb(13, 118, 222);
animation: water 4s linear infinite;
}
@keyframes water {
0%,
100% {
clip-path: polygon(1% 40%, 12% 54%, 22% 63%, 32% 69%, 45% 71%,
59% 72%, 78% 74%, 93% 74%, 100% 75%, 100% 100%, 0% 100%);
}
50% {
clip-path: polygon(0% 70%, 10% 71%, 24% 72%,
38% 73%, 53% 65%, 62% 59%, 75% 53%,
90% 50%, 100% 51%, 100% 100%, 0% 80%);
}
}
</style>
<div>
<h1>备忘录</h1>
<h1>备忘录</h1>
</div>
</html>