炫酷HTML5 SVG文字变形动画特效-html教程-PHP中文网

首页

web前端

html教程

炫酷HTML5 SVG文字变形动画特效

Jan 18, 2017 pm 02:42 PM

简要教程

这是一款使用效果非常炫酷的HTML5 SVG文字变形动画特效。该特效使用SVG和anime.js，通过SVG描边动画来完成各种漂亮的字母动画特效。

使用方法

HTML结构

第一个DEMO的HTML结构如下：

&lt;svg width=&quot;100%&quot; height=&quot;100%&quot; viewBox=&quot;0 0 320 180&quot; class=&quot;letters letters--effect-1&quot;&gt;
  &lt;!--W--&gt;
  &lt;g class=&quot;letter letter--1&quot;&gt;
    &lt;g class=&quot;letter__part&quot;&gt;
      &lt;path class=&quot;letter__layer color-6&quot; d=&quot;M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2&quot; /&gt;
      &lt;path class=&quot;letter__layer color-1&quot; d=&quot;M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2&quot; /&gt;
      &lt;path class=&quot;letter__layer color-2&quot; d=&quot;M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2&quot; /&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  &lt;!--I--&gt;
  &lt;g class=&quot;letter letter--2&quot;&gt;
    &lt;g class=&quot;letter__part&quot;&gt;
      &lt;path class=&quot;letter__layer color-6&quot; d=&quot;M100,20.3l8.4,58.4&quot; /&gt;
      &lt;path class=&quot;letter__layer color-2&quot; d=&quot;M100,20.3l8.4,58.4&quot; /&gt;
      &lt;path class=&quot;letter__layer color-3&quot; d=&quot;M100,20.3l8.4,58.4&quot; /&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  &lt;!--L--&gt;
  &lt;g class=&quot;letter letter--3&quot;&gt;
    &lt;g class=&quot;letter__part&quot;&gt;
      &lt;path class=&quot;letter__layer color-6&quot; d=&quot;M126.4,70.8l27.6,0.5&quot; /&gt;
      &lt;path class=&quot;letter__layer color-3&quot; d=&quot;M126.4,70.8l27.6,0.5&quot; /&gt;
      &lt;path class=&quot;letter__layer color-4&quot; d=&quot;M126.4,70.8l27.6,0.5&quot; /&gt;
    &lt;/g&gt;
    &lt;g class=&quot;letter__part&quot;&gt;
      &lt;path class=&quot;letter__layer color-6&quot; d=&quot;M128.9,15.6l-2.3,60.2&quot; /&gt;
      &lt;path class=&quot;letter__layer color-3&quot; d=&quot;M128.9,15.6l-2.3,60.2&quot; /&gt;
      &lt;path class=&quot;letter__layer color-4&quot; d=&quot;M128.9,15.6l-2.3,60.2&quot; /&gt;
    &lt;/g&gt;
  &lt;/g&gt;
  &lt;!-- ...and so on --&gt;
&lt;/svg&gt;

登录后复制

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: &#39;easeInOutQuad&#39;
  },
  // The animation settings for the ´in´ animation (when the letters appear again).
  inAnimation: {
    properties: {
      translateY: {
        value: [-30, 0],
        duration: 900,
        elasticity: 600,
        easing: &#39;easeOutElastic&#39;
      },
      opacity: {
        value: [0, 1],
        duration: 500,
        easing: &#39;linear&#39;
      },
    },
    delay: 40 // delay increment per letter.
  },
  // Stroke animation settings
  pathAnimation: {
    duration: 800,
    easing: &#39;easeOutQuint&#39;,
    delay: 200 // delay increment per path.
  }
};

登录后复制

以上就是炫酷HTML5 SVG文字变形动画特效的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn