SOURCE

<h1 contenteditable>生日快乐</h1>

<svg display="none">
  <defs>
    <filter id="wreckit">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
    </filter>
  </defs>
</svg>

@import url("https://fonts.googleapis.com/css?family=Rubik+Mono+One");
body,
html {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: url("#wreckit");
  animation: wavemover 10s infinite alternate linear;
  font-family: 'Rubik Mono One', sans-serif;
  background: #2396ca;
}
h1 {
  color: #6dd2fd;
  font-size: 8vmax;
}
h1::selection {
  background: #00f;
}
@-moz-keyframes wavemover {
  100% {
    padding-left: 200px;
    transform: translateX(-100px);
  }
}
@-webkit-keyframes wavemover {
  100% {
    padding-left: 200px;
    transform: translateX(-100px);
  }
}
@-o-keyframes wavemover {
  100% {
    padding-left: 200px;
    transform: translateX(-100px);
  }
}
@keyframes wavemover {
  100% {
    padding-left: 200px;
    transform: translateX(-100px);
  }
}