SVG实战飞线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞线图</title>
<style>
#flyline{
box-shadow: 2px 2px 10px rgba(0, 0, 0, .4);
}
</style>
</head>
<body>
<svg id="flyline" width="900" height="600">
<defs>
<radialGradient id="flyline-gradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
</defs>
<g>
<defs>
<path id="line-path" d="M376,216 Q335,205 238,222" fill="transparent"></path>
</defs>
<use xlink:href="#line-path" stroke-width="2" stroke="rgba(103, 224, 227, 0.5)"></use>
<mask id="maskline">
<circle cx="0" cy="0" r="100" fill="url(#flyline-gradient)">
<animateMotion dur="2.1" path="M376,216 Q335,205 238,222" rotate="auto" repeatCount="indefinite"></animateMotion>
</circle>
</mask>
<use xlink:href="#line-path" stroke-width="2" stroke="#ffde93" mask="url(#maskline)">
<animate attributeName="stroke-dasharray" from="0, 138" to="138, 0" dur="2.1" repeatCount="indefinite"></animate>
</use>
</g>
</svg>
</body>
</html>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
