web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
文字效果
炫酷HTML5 SVG文字变形动画特效
分类:
文字效果
日期:
2024-05-14
点击(3)
评论(0)
演 示
免费下载
简介
##### 简要教程 这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js,通过SVG描边动画来完成各种漂亮的字母动画特效。 ##### 使用方法 HTML5 SVG文字变形动画 ##### HTML结构 第一个DEMO的HTML结构如下: ```html
``` CSS样式 为SVG文字添加一些样式: ```html /* 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来完成。 ```html 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. } }; ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告