CSS波浪动画文本 [英] Animated text with CSS wave

问题描述

工作原理

下面显示的.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, 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> 

解决方案

您可以使用多种技术来实现由动画波填充的文本.这是使用模式元素的SVG的一种方法.文本填充有波形图案，并使用SMIL动画对该图案进行动画处理.外观如下:

这种方法将使您可以用非普通背景(例如渐变色)填充图案，并在图像或任何非普通背景上显示文本.

您可以在这里看到它的作用: 用文本剪切的动画波 .

 body,html{margin:0;padding:0;height:100%;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
  background-size:cover;
  font-family: 'Cabin Condensed', sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
svg{font-weight:bold;max-width:600px;height:auto;} 

 <svg viewbox="0 0 100 20">
  <defs>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="#326384"/>
      <stop offset="95%" stop-color="#123752"/>
    </linearGradient>
    <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
      <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)"> 
        <animateTransform attributeName="transform" type="translate" begin="0s" dur="1.5s" from="0,0" to="40,0" repeatCount="indefinite" />
      </path>
    </pattern>
  </defs>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="0.6">LOADING</text>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text>
</svg> 

编辑----

在此示例中，我从CSS关键帧动画切换为SMIL动画，因为Firefox尚不支持<defs>标记中定义的元素上的CSS关键帧(请参阅

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, 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>

---

Question

Instead of using an image, how can I replace with a pure CSS shape as I would like to implement my colour tween which will change the colour of the white wave you see in my demo above going from red to green.

NOTE: Black background is only being used for StackOverflow whereas my background may vary in colour.

---

Examples Of A Wave Effect

#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>

解决方案

You may achieve text filled by an animated wave with several techniques. Here is an approach with SVG using the pattern element. The text is filled with a wave shaped pattern and the pattern is animated with SMIL animations. Here is what it looks like :

This approach will allow you to fill the pattern with a non plain background (like a gradient) and display your text over an image or any non plain background.

You can see this in action here : Animated wave clipped with text.

body,html{margin:0;padding:0;height:100%;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');
  background-size:cover;
  font-family: 'Cabin Condensed', sans-serif;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
svg{font-weight:bold;max-width:600px;height:auto;}

<svg viewbox="0 0 100 20">
  <defs>
    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="#326384"/>
      <stop offset="95%" stop-color="#123752"/>
    </linearGradient>
    <pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
      <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" fill="url(#gradient)"> 
        <animateTransform attributeName="transform" type="translate" begin="0s" dur="1.5s" from="0,0" to="40,0" repeatCount="indefinite" />
      </path>
    </pattern>
  </defs>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="0.6">LOADING</text>
  <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text>
</svg>

EDIT ----

I switched from CSS keyframe animations to SMIL animations for this example as Firefox doesn't support CSS keyframes on the elements defined in the <defs> tag yet (see https://bugzilla.mozilla.org/show_bug.cgi?id=1118710).

这篇关于CSS波浪动画文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！