效果图:
描述说明:
这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js,通过SVG描边动画来完成各种漂亮的字母动画特效。
简要教程
这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js,通过SVG描边动画来完成各种漂亮的字母动画特效。
使用方法
HTML结构
第一个DEMO的HTML结构如下:
<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1"> <!--W--> <g class="letter letter--1"> <g class="letter__part"> <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" /> <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" /> <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" /> </g> </g> <!--I--> <g class="letter letter--2"> <g class="letter__part"> <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" /> <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" /> <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" /> </g> </g> <!--L--> <g class="letter letter--3"> <g class="letter__part"> <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" /> <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" /> <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" /> </g> <g class="letter__part"> <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" /> <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" /> <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" /> </g> </g> <!-- ...and so on --> </svg>
CSS样式
为SVG文字添加一些样式:
/* Main SVG */ .letters { position: relative; display: block; min-height: 400px; max-height: 70vh; margin: 0 auto; } /* Letter path */ .letter__layer { fill: none; stroke-miterlimit: 3; stroke-linecap: butt; stroke-linejoin: bevel; } /* Styles for effect 1 */ .letters--effect-1 .letter__layer:first-child { stroke-width: 9px; } .letters--effect-1 .letter__layer:nth-child(2) { stroke-width: 9.5px; } .letters--effect-1 .letter__layer:nth-child(3) { stroke-width: 10px; } /* Effect 1 colors */ .color-1 { stroke: #dea521; } .color-2 { stroke: #f84242; } .color-3 { stroke: #3758a7; } .color-4 { stroke: #f79c8c; } .color-5 { stroke: #84b5bd; } .color-6 { stroke: #feefde; }
JavaScript
SVG文字的动画通过anime.js来驱动。anime.js动画库插件允许我们设置动画的不同属性,以及处理不同类型的动画。该特效主要有两种类型的动画:第一是各个字母的运动,第二是描边动画。描边动画使用stroke-dasharray和stroke-dashoffset来完成。
Phrase.prototype.options = { outAnimation: { translateY: [0, 15], opacity: [1, 0], duration: 250, easing: 'easeInOutQuad' }, // The animation settings for the ′in′ animation (when the letters appear again). inAnimation: { properties: { translateY: { value: [-30, 0], duration: 900, elasticity: 600, easing: 'easeOutElastic' }, opacity: { value: [0, 1], duration: 500, easing: 'linear' }, }, delay: 40 // delay increment per letter. }, // Stroke animation settings pathAnimation: { duration: 800, easing: 'easeOutQuint', delay: 200 // delay increment per path. } };
转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/349.html
1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意