下面显示的.png图像被剪切为带动画的文本;

在行动中

body { background: #000000; }

.Wave-Loader {
	text-transform: uppercase;
	font-family: 'Cabin Condensed',sans-serif;
	font-weight: bold;
	font-size: 100pt;
	text-align: center;
	height: 120px;
	line-height: 110px;
	vertical-align: bottom;
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	bottom: 0;
}

.Wave-Loader.Wave {
	background-image: url("http://i.imgur.com/uFpLbYt.png");
	-moz-background-clip: text;
	-o-background-clip: text;
	  -webkit-background-clip: text;
		background-clip: text;
	color: transparent;
	text-shadow: 0px 0px rgba(255,255,0.06);
	animation: Wave-Loader 1s infinite linear;
	background-size: 200px 100px;
	background-repeat: repeat-x;
	opacity: 1;
}
@keyframes Wave-Loader {
	0% { background-position: 0 bottom; }
	100% { background-position: 200px bottom; }
}

<div class="Wave-Loader Wave">loading</div>

题

而不是使用图像,我如何替换纯CSS形状,因为我想实现我的颜色补间,这将改变你在我的演示中看到的白色波浪的颜色从红色变为绿色.

注意：黑色背景仅用于StackOverflow,而我的背景颜色可能不同.

波效应的例子

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #000000;
}
#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}
#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #000000;
  left: 0;
  top: 27px;
}

<div id="wave"></div>

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

<div class="container">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
  </svg>
</div>