SVG文字变形动画特效

所属分类:其他-动画效果

 38556  462  查看评论 (5)
分享到微信朋友圈
X
SVG文字变形动画特效 ie兼容10

简要教程

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


相关插件-动画效果

纯css仿qq浏览器官网的彗星

仿qq浏览器官网的彗星,纯css
  动画效果
 41348  498

3Dtransfrom和animation的结合

一个学习css3transfm3D和animation的入门效果
  动画效果
 29803  464

原生js波浪点击按键(原创)

利用原生js实现波浪点击效果,没有用到任何插件
  动画效果
 28874  358

HTML5 Canvas下雪效果插件

飘雪效果,可设置控制数量
  动画效果
 45211  353

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    1874, 0
    2016/11/18 14:11:56
    花∮饰∮雪 0
    2016/10/14 17:10:51
    JkGamingTech 0
    2016/10/13 11:10:52
    如何自定义字呢
        xiaocao_fei0
        2016/11/2 20:11:50
        字体就是svg绘制的啊,你画成啥样就是啥字体
        Drury0
        2017/2/10 13:25:13

        怎么画押

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复