炫酷HTML5SVG文字变形动画特效

来源：动视网责编：小采时间：2020-11-27 15:36:41

炫酷HTML5SVG文字变形动画特效

炫酷HTML5SVG文字变形动画特效:简要教程这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。使用方法 HTML结构第一个DEMO的HTML结构如下：<svg width="100%" height=&q

推荐度：

点击下载本文 文档为doc格式

导读炫酷HTML5SVG文字变形动画特效:简要教程这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。使用方法 HTML结构第一个DEMO的HTML结构如下：<svg width="100%" height=&q

简要教程

这是一款使用效果非常炫酷的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.
 }
};

炫酷HTML5SVG文字变形动画特效

推荐度：

点击下载本文 文档为doc格式

标签：文字特效 html

热门焦点

炫酷HTML5SVG文字变形动画特效

炫酷HTML5SVG文字变形动画特效

炫酷HTML5SVG文字变形动画特效

最新推荐

猜你喜欢

热门推荐