CSS3 文本内的泡沫漂浮动画

大致思路：1、设置一段文字，将这段文字透明化（-webkit-text-fill-color: transparent;）

2、将该背景剪切，剪切后只留下文字背景

3、添加背景图，然后设置动画效果与关键帧

<h1 class="title">happy!</h1>

css：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: #73cde7;
}

.title {
  font-size: 200px;
  background-color: #011f42;
  text-align: center;
  background-image: url(./img/bubbles.png);
  /* 背景不平铺 */
  background-repeat: repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 通过css3的变形让盒子水平居中-----让盒子水平方向向左移动自身宽度的50%和 让盒子水平方向向左移动自身高度的50%； */
  transform: translate(-50%, -50%);
  /* 英文文本变成大写 */
  text-transform: uppercase;
  /* 文本字体变为透明 */
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  -ms-text-fill-color: transparent;
  /* 背景裁切 */
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -o-background-clip: text;
  -ms-background-clip: text;
  /* css3动画效果 animate-background自定义动画名称 12s动画完成时间 linear 匀速播放 infinite无限循环 */
  animation: animate-background 12s linear infinite;
}

/* 设置关键帧 */
@keyframes animate-background {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -300px;
  }
}

实现效果：