You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.2 KiB
HTML
65 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>二次贝塞尔曲线动画</title>
|
|
</head>
|
|
|
|
<body>
|
|
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"
|
|
style="outline: solid #000 1px; width: 90vmin; aspect-ratio: 1/1;">
|
|
<!-- 定义阴影滤镜 -->
|
|
<defs>
|
|
<filter id="shadow" x="-200%" y="-200%" width="500%" height="500%">
|
|
<feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="red" flood-opacity="1" />
|
|
</filter>
|
|
|
|
<!-- 定义线性渐变 -->
|
|
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color: black; stop-opacity: 1" />
|
|
<stop offset="100%" style="stop-color: white; stop-opacity: 1" />
|
|
</linearGradient>
|
|
|
|
<!-- 定义mask -->
|
|
<mask id="mask">
|
|
<rect x="-20" y="-1" width="20" height="3" fill="url(#gradient)">
|
|
<animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
|
|
<mpath href="#bezierPath" />
|
|
</animateMotion>
|
|
</rect>
|
|
</mask>
|
|
</defs>
|
|
<!-- 定义二次贝塞尔曲线路径 -->
|
|
<path id="bezierPath" d="
|
|
M 10,10
|
|
Q 290,10,290,290
|
|
Q 10,290,10,10
|
|
L 290,290
|
|
C 100,200,200,100,10,10
|
|
" stroke-width="1" stroke="#0001" fill="none" />
|
|
|
|
<path d="
|
|
M 10,10
|
|
Q 290,10,290,290
|
|
Q 10,290,10,10
|
|
L 290,290
|
|
C 100,200,200,100,10,10
|
|
" stroke-width="1" stroke="red" fill="none" mask="url(#mask)" />
|
|
|
|
<!-- 定义光点 -->
|
|
<circle cx="0" cy="0" r="1" fill="red" filter="url(#shadow)">
|
|
<!-- 使用animateMotion让光点沿路径移动 -->
|
|
<animateMotion dur="5s" repeatCount="indefinite" calcMode="linear">
|
|
<mpath href="#bezierPath" rotate="reverse" />
|
|
</animateMotion>
|
|
</circle>
|
|
|
|
|
|
|
|
|
|
</svg>
|
|
</body>
|
|
|
|
</html> |