怎么运行的
The .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>
Question
除了使用图像之外，我如何替换为纯 CSS 形状，因为我想实现我的颜色补间，这会将您在上面的演示中看到的白色波浪的颜色从红色变为绿色。
NOTE:黑色背景仅用于 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 动画进行动画处理。它是这样的：
这种方法将允许您使用非纯背景（如渐变）填充图案，并在图像或任何非纯背景上显示文本。
您可以在这里看到它的实际效果：用文本剪辑的动画波浪 http://codepen.io/web-tiki/pen/YNKMpB.
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>尚未标记（请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=1118710 https://bugzilla.mozilla.org/show_bug.cgi?id=1118710).
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
