这个怎么运作
下面显示的.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; } }@H_502_9@<div class="Wave-Loader Wave">loading</div>@H_502_9@题
而不是使用图像,我如何替换纯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; }@H_502_9@<div id="wave"></div>@H_502_9@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; }@H_502_9@<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>@H_502_9@
解决方法
您可以使用多种技术来实现由动画波填充的文本.这是使用模式元素的SVG方法.文本中填充了波形图案,并使用SMIL动画对图案进行动画处理.这是它的样子:
此方法允许您使用非普通背景(如渐变)填充图案,并在图像或任何非普通背景上显示文本.
你可以在这里看到这个: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;}@H_502_9@<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>@H_502_9@编辑—-
我为此示例从CSS关键帧动画切换到SMIL动画,因为Firefox不支持< defs>中定义的元素上的CSS关键帧.标记(见https://bugzilla.mozilla.org/show_bug.cgi?id=1118710).