这是一款基于HTML5 SVG的炫酷文字波浪特效。该文字波浪动画特效在文字中使用SVG遮罩和CSS混合模式来制作波浪运动的效果，就像文字中有一片海洋一样，效果非常酷。

 使用方法  HTML结构

在线预览    源码下载

在SVG中，使用<pattern>元素来作为波浪运动的模式。<text>元素是文字，在组g#eff中使用4个矩形来作为文字的遮罩层，并将它们的CSS混合模式设置为color-burn。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve"> <defs> <pattern patternContentUnits="objectBoundingBox"> <path fill="#000" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"/> </pattern> <text transform="translate(2,116)" font-family="'Cabin Condensed'" font-size="161.047">OCEAN</text> <mask> <use x="0" y="0" xlink:href="#text" opacity="1" fill="#ffffff"/> </mask> <g> <use x="0" y="0" xlink:href="#text" fill="#a2a3a5"/> <rect mask="url(#text-mask)" fill="url(#water)" x="-300" y="50" opacity="0.3"> <animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="2s"/> </rect> <rect mask="url(#text-mask)" fill="url(#water)" y="45" opacity="0.3"> <animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="3s"/> </rect> <rect mask="url(#text-mask)" fill="url(#water)" y="55" opacity="0.3"> <animate attributeType="xml" attributeName="x" from="-200" to="0" repeatCount="indefinite" dur="1.4s"/> </rect> <rect mask="url(#text-mask)" fill="url(#water)" y="55" opacity="0.3"> <animate attributeType="xml" attributeName="x" from="-500" to="0" repeatCount="indefinite" dur="2.8s"/> </rect> </g> </defs> <use xlink:href="#eff" opacity="0.9"/> </svg>