我研究了这些:https://css-tricks.com/svg-line-animation-works/
https://jakearchibald.com/2013/animated-line-drawing-svg
使用Html5blank主题。我的javascript代码是:
(function ($, root, undefined) {
$(function () {
'use strict';
// DOM ready, take it away
var paths = document.querySelectorAll('path.letter');
[].forEach.call(paths, function(path) {
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 2s ease-in-out';
// Go!
path.style.strokeDashoffset = '0';
})
});
})(jQuery, this);