动态打字效果 html,html5 svg酷炫的打字动画特效

特效描述：html5 svg打字动画特效。html5 svg在input文本框里面输入文字，酷炫的动态打字动画特效。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

const selectSVG = id => {

const el = document.getElementById(id);

return new SVGElement(el);

};

const createSVG = type => {

const el = document.createElementNS('http://www.w3.org/2000/svg', type);

return new SVGElement(el);

};

class SVGElement {

constructor(element) {

this.element = element;

}

set(attributeName, value) {

this.element.setAttribute(attributeName, value);

}

style(property, value) {

this.element.style[property] = value;

}

}

const colors = [

{ main: '#FBDB4A', shades: ['#FAE073', '#FCE790', '#FADD65', '#E4C650'] },

{ main: '#F3934A', shades: ['#F7B989', '#F9CDAA', '#DD8644', '#F39C59'] },

{ main: '#EB547D', shades: ['#EE7293', '#F191AB', '#D64D72', '#C04567'] },

{ main: '#9F6AA7', shades: ['#B084B6', '#C19FC7', '#916198', '#82588A'] },

{ main: '#5476B3', shades: ['#6382B9', '#829BC7', '#4D6CA3', '#3E5782'] },

{ main: '#2BB19B', shades: ['#4DBFAD', '#73CDBF', '#27A18D', '#1F8171'] },

{ main: '#70B984', shades: ['#7FBE90', '#98CBA6', '#68A87A', '#5E976E'] }

];

const svg = selectSVG('svg');

const text = document.getElementById('text');

const offscreenText = document.getElementById('offscr