过去几天，我一直在研究 SVG 动画，但我意识到它并没有提供我需要的一切。
我在 google 上搜索了不同的 SVG 路径动画，并偶然发现了anime.js 及其“看似”简单的 SVG 运动路径。检查codepen不幸的是，复制代码并下载库不起作用。 我看不到这个正方形，即使我尽力让它可见，它也根本不会移动。现在请注意，我很少与图书馆一起工作，而且我不知道它如何工作的标准。
无数其他人也遇到过同样的问题，并且可以通过简单的 onload.window 函数轻松修复，或者切换他们称为anime.min.js的位置已经解决了大多数问题。但不适合我。要么图书馆已经过时，要么我错过了一些明显的东西。 (很可能是后者......)
Full HTML
<!DOCTYPE html>
<html>
<head>
<title>SVG line drawing | anime.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<script src="anime-master/anime.min.js"></script>
<link href="css.css" rel="stylesheet">
</head>
<body>
<section>
<article>
<svg width="256" height="112" viewBox="0 0 256 112">
<path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
</svg>
<div class="green"></div>
</article>
</section>
<script>
var path = anime.path('path');
anime({
targets: 'div',
translateX: path,
translateY: path,
rotate: path,
duration: 3000,
loop: true,
easing: 'linear'
});
anime({
targets: 'path',
opacity: 0,
duration: 6000,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo'
});
</script>
</body>
</html>
CSS
div {
position: absolute;
top: .5rem;
left: .5rem;
width: 1rem;
height: 1rem;
}
现在，正如我提到的，我已尝试在页面上的任何位置调用该库。在头部，最后在正文(是的，我知道，我必须这样做)，在 JavaScript < script > 之上。
我在控制台中没有收到任何错误，并且我可以通过开发人员源查看anime.min.js。
我被困住了，我已经做了尽可能多的谷歌搜索。谁能指导我正确的方向，以便我可以继续努力？
更新:仍在尝试解决此问题。我尝试使用不同的示例，例如 SVG Path Animation我让它工作了，所以我很确定我在正确的地方调用了图书馆。但 SVG 运动路径仍然不起作用。我昨天发布了这个问题，得到的回复为零，希望这能解决这个问题。
最佳答案
您还必须包含外部文件。
从 codepen 复制时，请确保包含外部脚本文件。
您可以看到一个设置图标。单击它将显示是否有链接的外部文件。所以不要忘记包含它。
在这里，您包含了外部 js 文件，但错过了外部 css 文件。
// IE cannot apply CSS transforms on SVG elements. (See https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg)
/*
* Anime v1.1.2
* http://anime-js.com
* JavaScript animation engine
* Copyright (c) 2016 Julian Garnier
* http://juliangarnier.com
* Released under the MIT license
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.anime = factory();
}
}(this, function () {
var version = '1.1.2';
// Defaults
var defaultSettings = {
duration: 1000,
delay: 0,
loop: false,
autoplay: true,
direction: 'normal',
easing: 'easeOutElastic',
elasticity: 400,
round: false,
begin: undefined,
update: undefined,
complete: undefined
}
// Transforms
var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY'];
var transform, transformStr = 'transform';
// Utils
var is = {
arr: function(a) { return Array.isArray(a) },
obj: function(a) { return Object.prototype.toString.call(a).indexOf('Object') > -1 },
svg: function(a) { return a instanceof SVGElement },
dom: function(a) { return a.nodeType || is.svg(a) },
num: function(a) { return !isNaN(parseInt(a)) },
str: function(a) { return typeof a === 'string' },
fnc: function(a) { return typeof a === 'function' },
und: function(a) { return typeof a === 'undefined' },
nul: function(a) { return typeof a === 'null' },
hex: function(a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a) },
rgb: function(a) { return /^rgb/.test(a) },
hsl: function(a) { return /^hsl/.test(a) },
col: function(a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)) }
}
// Easings functions adapted from https://jqueryui.com/
var easings = (function() {
var eases = {};
var names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
var functions = {
Sine: function(t) { return 1 - Math.cos( t * Math.PI / 2 ); },
Circ: function(t) { return 1 - Math.sqrt( 1 - t * t ); },
Elastic: function(t, m) {
if( t === 0 || t === 1 ) return t;
var p = (1 - Math.min(m, 998) / 1000), st = t / 1, st1 = st - 1, s = p / ( 2 * Math.PI ) * Math.asin( 1 );
return -( Math.pow( 2, 10 * st1 ) * Math.sin( ( st1 - s ) * ( 2 * Math.PI ) / p ) );
},
Back: function(t) { return t * t * ( 3 * t - 2 ); },
Bounce: function(t) {
var pow2, bounce = 4;
while ( t < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - t, 2 );
}
}
names.forEach(function(name, i) {
functions[name] = function(t) {
return Math.pow( t, i + 2 );
}
});
Object.keys(functions).forEach(function(name) {
var easeIn = functions[name];
eases['easeIn' + name] = easeIn;
eases['easeOut' + name] = function(t, m) { return 1 - easeIn(1 - t, m); };
eases['easeInOut' + name] = function(t, m) { return t < 0.5 ? easeIn(t * 2, m) / 2 : 1 - easeIn(t * -2 + 2, m) / 2; };
eases['easeOutIn' + name] = function(t, m) { return t < 0.5 ? (1 - easeIn(1 - 2 * t, m)) / 2 : (easeIn(t * 2 - 1, m) + 1) / 2; };
});
eases.linear = function(t) { return t; };
return eases;
})();
// Strings
var numberToString = function(val) {
return (is.str(val)) ? val : val + '';
}
var stringToHyphens = function(str) {
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}
var selectString = function(str) {
if (is.col(str)) return false;
try {
var nodes = document.querySelectorAll(str);
return nodes;
} catch(e) {
return false;
}
}
// Numbers
var random = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Arrays
var flattenArray = function(arr) {
return arr.reduce(function(a, b) {
return a.concat(is.arr(b) ? flattenArray(b) : b);
}, []);
}
var toArray = function(o) {
if (is.arr(o)) return o;
if (is.str(o)) o = selectString(o) || o;
if (o instanceof NodeList || o instanceof HTMLCollection) return [].slice.call(o);
return [o];
}
var arrayContains = function(arr, val) {
return arr.some(function(a) { return a === val; });
}
var groupArrayByProps = function(arr, propsArr) {
var groups = {};
arr.forEach(function(o) {
var group = JSON.stringify(propsArr.map(function(p) { return o[p]; }));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function(group) {
return groups[group];
});
}
var removeArrayDuplicates = function(arr) {
return arr.filter(function(item, pos, self) {
return self.indexOf(item) === pos;
});
}
// Objects
var cloneObject = function(o) {
var newObject = {};
for (var p in o) newObject[p] = o[p];
return newObject;
}
var mergeObjects = function(o1, o2) {
for (var p in o2) o1[p] = !is.und(o1[p]) ? o1[p] : o2[p];
return o1;
}
// Colors
var hexToRgb = function(hex) {
var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
var hex = hex.replace(rgx, function(m, r, g, b) { return r + r + g + g + b + b; });
var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var r = parseInt(rgb[1], 16);
var g = parseInt(rgb[2], 16);
var b = parseInt(rgb[3], 16);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
var hslToRgb = function(hsl) {
var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hsl);
var h = parseInt(hsl[1]) / 360;
var s = parseInt(hsl[2]) / 100;
var l = parseInt(hsl[3]) / 100;
var hue2rgb = function(p, q, t) {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var r, g, b;
if (s == 0) {
r = g = b = l;
} else {
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return 'rgb(' + r * 255 + ',' + g * 255 + ',' + b * 255 + ')';
}
var colorToRgb = function(val) {
if (is.rgb(val)) return val;
if (is.hex(val)) return hexToRgb(val);
if (is.hsl(val)) return hslToRgb(val);
}
// Units
var getUnit = function(val) {
return /([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(val)[2];
}
var addDefaultTransformUnit = function(prop, val, intialVal) {
if (getUnit(val)) return val;
if (prop.indexOf('translate') > -1) return getUnit(intialVal) ? val + getUnit(intialVal) : val + 'px';
if (prop.indexOf('rotate') > -1 || prop.indexOf('skew') > -1) return val + 'deg';
return val;
}
// Values
var getCSSValue = function(el, prop) {
// First check if prop is a valid CSS property
if (prop in el.style) {
// Then return the property value or fallback to '0' when getPropertyValue fails
return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
}
}
var getTransformValue = function(el, prop) {
var defaultVal = prop.indexOf('scale') > -1 ? 1 : 0;
var str = el.style.transform;
if (!str) return defaultVal;
var rgx = /(\w+)\((.+?)\)/g;
var match = [];
var props = [];
var values = [];
while (match = rgx.exec(str)) {
props.push(match[1]);
values.push(match[2]);
}
var val = values.filter(function(f, i) { return props[i] === prop; });
return val.length ? val[0] : defaultVal;
}
var getAnimationType = function(el, prop) {
if ( is.dom(el) && arrayContains(validTransforms, prop)) return 'transform';
if ( is.dom(el) && (el.getAttribute(prop) || (is.svg(el) && el[prop]))) return 'attribute';
if ( is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) return 'css';
if (!is.nul(el[prop]) && !is.und(el[prop])) return 'object';
}
var getInitialTargetValue = function(target, prop) {
switch (getAnimationType(target, prop)) {
case 'transform': return getTransformValue(target, prop);
case 'css': return getCSSValue(target, prop);
case 'attribute': return target.getAttribute(prop);
}
return target[prop] || 0;
}
var getValidValue = function(values, val, originalCSS) {
if (is.col(val)) return colorToRgb(val);
if (getUnit(val)) return val;
var unit = getUnit(values.to) ? getUnit(values.to) : getUnit(values.from);
if (!unit && originalCSS) unit = getUnit(originalCSS);
return unit ? val + unit : val;
}
var decomposeValue = function(val) {
var rgx = /-?\d*\.?\d+/g;
return {
original: val,
numbers: numberToString(val).match(rgx) ? numberToString(val).match(rgx).map(Number) : [0],
strings: numberToString(val).split(rgx)
}
}
var recomposeValue = function(numbers, strings, initialStrings) {
return strings.reduce(function(a, b, i) {
var b = (b ? b : initialStrings[i - 1]);
return a + numbers[i - 1] + b;
});
}
// Animatables
var getAnimatables = function(targets) {
var targets = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : [];
return targets.map(function(t, i) {
return { target: t, id: i };
});
}
// Properties
var getProperties = function(params, settings) {
var props = [];
for (var p in params) {
if (!defaultSettings.hasOwnProperty(p) && p !== 'targets') {
var prop = is.obj(params[p]) ? cloneObject(params[p]) : {value: params[p]};
prop.name = p;
props.push(mergeObjects(prop, settings));
}
}
return props;
}
var getPropertiesValues = function(target, prop, value, i) {
var values = toArray( is.fnc(value) ? value(target, i) : value);
return {
from: (values.length > 1) ? values[0] : getInitialTargetValue(target, prop),
to: (values.length > 1) ? values[1] : values[0]
}
}
// Tweens
var getTweenValues = function(prop, values, type, target) {
var valid = {};
if (type === 'transform') {
valid.from = prop + '(' + addDefaultTransformUnit(prop, values.from, values.to) + ')';
valid.to = prop + '(' + addDefaultTransformUnit(prop, values.to) + ')';
} else {
var originalCSS = (type === 'css') ? getCSSValue(target, prop) : undefined;
valid.from = getValidValue(values, values.from, originalCSS);
valid.to = getValidValue(values, values.to, originalCSS);
}
return { from: decomposeValue(valid.from), to: decomposeValue(valid.to) };
}
var getTweensProps = function(animatables, props) {
var tweensProps = [];
animatables.forEach(function(animatable, i) {
var target = animatable.target;
return props.forEach(function(prop) {
var animType = getAnimationType(target, prop.name);
if (animType) {
var values = getPropertiesValues(target, prop.name, prop.value, i);
var tween = cloneObject(prop);
tween.animatables = animatable;
tween.type = animType;
tween.from = getTweenValues(prop.name, values, tween.type, target).from;
tween.to = getTweenValues(prop.name, values, tween.type, target).to;
tween.round = (is.col(values.from) || tween.round) ? 1 : 0;
tween.delay = (is.fnc(tween.delay) ? tween.delay(target, i, animatables.length) : tween.delay) / animation.speed;
tween.duration = (is.fnc(tween.duration) ? tween.duration(target, i, animatables.length) : tween.duration) / animation.speed;
tweensProps.push(tween);
}
});
});
return tweensProps;
}
var getTweens = function(animatables, props) {
var tweensProps = getTweensProps(animatables, props);
var splittedProps = groupArrayByProps(tweensProps, ['name', 'from', 'to', 'delay', 'duration']);
return splittedProps.map(function(tweenProps) {
var tween = cloneObject(tweenProps[0]);
tween.animatables = tweenProps.map(function(p) { return p.animatables });
tween.totalDuration = tween.delay + tween.duration;
return tween;
});
}
var reverseTweens = function(anim, delays) {
anim.tweens.forEach(function(tween) {
var toVal = tween.to;
var fromVal = tween.from;
var delayVal = anim.duration - (tween.delay + tween.duration);
tween.from = toVal;
tween.to = fromVal;
if (delays) tween.delay = delayVal;
});
anim.reversed = anim.reversed ? false : true;
}
var getTweensDuration = function(tweens) {
if (tweens.length) return Math.max.apply(Math, tweens.map(function(tween){ return tween.totalDuration; }));
}
var getTweensDelay = function(tweens) {
if (tweens.length) return Math.min.apply(Math, tweens.map(function(tween){ return tween.delay; }));
}
// will-change
var getWillChange = function(anim) {
var props = [];
var els = [];
anim.tweens.forEach(function(tween) {
if (tween.type === 'css' || tween.type === 'transform' ) {
props.push(tween.type === 'css' ? stringToHyphens(tween.name) : 'transform');
tween.animatables.forEach(function(animatable) { els.push(animatable.target); });
}
});
return {
properties: removeArrayDuplicates(props).join(', '),
elements: removeArrayDuplicates(els)
}
}
var setWillChange = function(anim) {
var willChange = getWillChange(anim);
willChange.elements.forEach(function(element) {
element.style.willChange = willChange.properties;
});
}
var removeWillChange = function(anim) {
var willChange = getWillChange(anim);
willChange.elements.forEach(function(element) {
element.style.removeProperty('will-change');
});
}
/* Svg path */
var getPathProps = function(path) {
var el = is.str(path) ? selectString(path)[0] : path;
return {
path: el,
value: el.getTotalLength()
}
}
var snapProgressToPath = function(tween, progress) {
var pathEl = tween.path;
var pathProgress = tween.value * progress;
var point = function(offset) {
var o = offset || 0;
var p = progress > 1 ? tween.value + o : pathProgress + o;
return pathEl.getPointAtLength(p);
}
var p = point();
var p0 = point(-1);
var p1 = point(+1);
switch (tween.name) {
case 'translateX': return p.x;
case 'translateY': return p.y;
case 'rotate': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI;
}
}
// Progress
var getTweenProgress = function(tween, time) {
var elapsed = Math.min(Math.max(time - tween.delay, 0), tween.duration);
var percent = elapsed / tween.duration;
var progress = tween.to.numbers.map(function(number, p) {
var start = tween.from.numbers[p];
var eased = easings[tween.easing](percent, tween.elasticity);
var val = tween.path ? snapProgressToPath(tween, eased) : start + eased * (number - start);
val = tween.round ? Math.round(val * tween.round) / tween.round : val;
return val;
});
return recomposeValue(progress, tween.to.strings, tween.from.strings);
}
var setAnimationProgress = function(anim, time) {
var transforms;
anim.currentTime = time;
anim.progress = (time / anim.duration) * 100;
for (var t = 0; t < anim.tweens.length; t++) {
var tween = anim.tweens[t];
tween.currentValue = getTweenProgress(tween, time);
var progress = tween.currentValue;
for (var a = 0; a < tween.animatables.length; a++) {
var animatable = tween.animatables[a];
var id = animatable.id;
var target = animatable.target;
var name = tween.name;
switch (tween.type) {
case 'css': target.style[name] = progress; break;
case 'attribute': target.setAttribute(name, progress); break;
case 'object': target[name] = progress; break;
case 'transform':
if (!transforms) transforms = {};
if (!transforms[id]) transforms[id] = [];
transforms[id].push(progress);
break;
}
}
}
if (transforms) {
if (!transform) transform = (getCSSValue(document.body, transformStr) ? '' : '-webkit-') + transformStr;
for (var t in transforms) {
anim.animatables[t].target.style[transform] = transforms[t].join(' ');
}
}
}
// Animation
var createAnimation = function(params) {
var anim = {};
anim.animatables = getAnimatables(params.targets);
anim.settings = mergeObjects(params, defaultSettings);
anim.properties = getProperties(params, anim.settings);
anim.tweens = getTweens(anim.animatables, anim.properties);
anim.duration = getTweensDuration(anim.tweens) || params.duration;
anim.delay = getTweensDelay(anim.tweens) || params.delay;
anim.currentTime = 0;
anim.progress = 0;
anim.ended = false;
return anim;
}
// Public
var animations = [];
var raf = 0;
var engine = (function() {
var play = function() { raf = requestAnimationFrame(step); };
var step = function(t) {
if (animations.length) {
for (var i = 0; i < animations.length; i++) animations[i].tick(t);
play();
} else {
cancelAnimationFrame(raf);
raf = 0;
}
}
return play;
})();
var animation = function(params) {
var anim = createAnimation(params);
var time = {};
anim.tick = function(now) {
anim.ended = false;
if (!time.start) time.start = now;
time.current = Math.min(Math.max(time.last + now - time.start, 0), anim.duration);
setAnimationProgress(anim, time.current);
var s = anim.settings;
if (time.current >= anim.delay) {
if (s.begin) s.begin(anim); s.begin = undefined;
if (s.update) s.update(anim);
}
if (time.current >= anim.duration) {
if (s.loop) {
time.start = now;
if (s.direction === 'alternate') reverseTweens(anim, true);
if (is.num(s.loop)) s.loop--;
} else {
anim.ended = true;
anim.pause();
if (s.complete) s.complete(anim);
}
time.last = 0;
}
}
anim.seek = function(progress) {
setAnimationProgress(anim, (progress / 100) * anim.duration);
}
anim.pause = function() {
removeWillChange(anim);
var i = animations.indexOf(anim);
if (i > -1) animations.splice(i, 1);
}
anim.play = function(params) {
anim.pause();
if (params) anim = mergeObjects(createAnimation(mergeObjects(params, anim.settings)), anim);
time.start = 0;
time.last = anim.ended ? 0 : anim.currentTime;
var s = anim.settings;
if (s.direction === 'reverse') reverseTweens(anim);
if (s.direction === 'alternate' && !s.loop) s.loop = 1;
setWillChange(anim);
animations.push(anim);
if (!raf) engine();
}
anim.restart = function() {
if (anim.reversed) reverseTweens(anim);
anim.pause();
anim.seek(0);
anim.play();
}
if (anim.settings.autoplay) anim.play();
return anim;
}
// Remove one or multiple targets from all active animations.
var remove = function(elements) {
var targets = flattenArray(is.arr(elements) ? elements.map(toArray) : toArray(elements));
for (var i = animations.length-1; i >= 0; i--) {
var animation = animations[i];
var tweens = animation.tweens;
for (var t = tweens.length-1; t >= 0; t--) {
var animatables = tweens[t].animatables;
for (var a = animatables.length-1; a >= 0; a--) {
if (arrayContains(targets, animatables[a].target)) {
animatables.splice(a, 1);
if (!animatables.length) tweens.splice(t, 1);
if (!tweens.length) animation.pause();
}
}
}
}
}
animation.version = version;
animation.speed = 1;
animation.list = animations;
animation.remove = remove;
animation.easings = easings;
animation.getValue = getInitialTargetValue;
animation.path = getPathProps;
animation.random = random;
return animation;
}));
var path = anime.path('path');
anime({
targets: 'div',
translateX: path,
translateY: path,
rotate: path,
duration: 3000,
loop: true,
easing: 'linear'
});
anime({
targets: 'path',
opacity: 0,
duration: 6000,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo'
});@font-face {
font-family: 'Circular';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/Circular-Book.woff') format('woff');
font-weight: normal;
}
@font-face {
font-family: 'Circular';
src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/Circular-Bold.woff') format('woff');
font-weight: bold;
}
* {
box-sizing: border-box;
}
html,
body {
background: #18212D;
}
body {
position: absolute;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 1rem;
color: white;
font-family: 'Circular', 'sans-serif';
-webkit-font-smoothing: antialiased;
}
section {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
max-width: 18rem;
margin: auto;
text-align: center;
}
h1 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
a {
color: #206EFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
margin-bottom: 1rem;
}
footer span {
opacity: .5;
}
.logo img {
width: 75px;
height: 16px;
}
article {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
min-height: 8rem;
margin-bottom: 1rem;
padding: 1rem;
}
.red {
background-color: #FF324A;
}
.green {
background-color: #31FFA6;
}
.blue {
background-color: #206EFF;
}
.yellow {
background-color: #FFFF99;
}
div {
position: absolute;
top: .5rem;
left: .5rem;
width: 1rem;
height: 1rem;
}<section>
<article>
<svg width="256" height="112" viewBox="0 0 256 112">
<path fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"/>
</svg>
<div class="green"></div>
</article>
<footer>
<span>Made with</span> <a href="http://anime-js.com">anime.js</a>
</footer>
<a class="logo" href="http://anime-js.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1137/anime-logo.png"></img></a>
</section>归因
从代码笔 https://codepen.io/juliangarnier/pen/dXNgVB 上的此笔复制代码
关于javascript - 如何在anime.js中调用javascript库？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46813115/