效果图:
描述说明:
这是一款效果非常炫酷的基于SVG和animate.css实现的炫酷文字动画效果。该效果中的文字和边框路径都使用SVG来制作,然后通过animate.css和walkway.js分别制作文字动画和SVG路径动画。
walkway.js是一款可以制作SVG路径动画的js插件。它使用简单,支持path
、line
和polyline
SVG元素。
animate.css则是一款功能强大的CSS3动画库,它支持多达66种CSS3动画效果,并且十分易于使用,几行代码即可完成一个动画效果。
HTML结构
在这个SVG文字动画效果中,通过内联的SVG来制作文字和路径。并通过<g>
元素对各组文字进行分组,以实现文字的不同动画效果。例如文字“Thats”的HTML代码为:
<g id="Thats"> <g> <path class="st0" d="M28.8,9.6v2.9h-3.1v6.9h-3.2v-6.9h-3.1V9.6H28.8z"/> <path class="st0" d="M33.8,13V9.6H37v9.9h-3.2v-3.6h-2.6v3.6H28V9.6h3.2V13H33.8z"/> <path class="st0" d="M36.7,19.5L40,9.6h4.9l3.3,9.9h-3.7l-0.6-1.8h-2.9l-0.6,1.8H36.7z M42.4,11.8L41,15.7h2.7L42.4,11.8z"/> <path class="st0" d="M57,9.6v2.9h-3.1v6.9h-3.2v-6.9h-3.1V9.6H57z"/> <path class="st0" d="M58.1,13.9V9.6h2.1v2.2L58.1,13.9z"/> <path class="st0" d="M69.6,12.6h-2.4c-1.2,0-1.3,0.3-0.5,1c1.5,1.3,2.2,2.6,2.2,3.8s-0.8,2-2.2,2.2h-5.2v-2.9h2.1 c1.3,0,1.5-0.3,0.5-1.1c-1.6-1.5-2.3-2.8-2-4s1-1.8,2.2-1.8h5.4V12.6z"/> </g> </g>
CSS样式
对于SVG路径预定义了两个class类:st0
和st1
。它们分别用于SVG路径的填充和描边。
.st0{fill:#DBD43E;} .st1{fill:none;stroke:#DBD43E;stroke-width:3;stroke-miterlimit:10;}
对于文字的动画效果,分别对每组文字使用不同的animate.css动画。
#hanSaidToFin { animation: fadeIn 2s ease; margin-left: auto; margin-right: auto; width: 300px; margin-top: 5%; } #Thats { animation: bounceInUp 1s ease; } #Not { animation: bounceInUp 1s 0.15s ease; } #How { animation: bounceInUp 1s 0.25s ease; } #The { animation: bounceInUp 1s 0.4s ease; } #Force { animation: zoomInUp 1s 0.6s ease; } #Works { animation: wobble 1s 1.5s ease; }
JavaScript
该特效中使用walkway.js来制作SVG边框的路径动画。
var svg = new Walkway({ selector: 'svg', duration: '1000' }); svg.draw();
转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/397.html