svg运动路径SMIL动画效果-html代码-BFW代码库

svg运动路径SMIL动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        html {
            min-height: 100vh;
        }

        body {
            background-color: #291642;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        svg {
            max-height: 400px;
        }

        #rocket {
            transform-box: fill-box;
        }
    </style>

</head>
<body translate="no">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1300 750">
        <animateMotion xlink:href="#rocket" dur="10s" rotate="auto" path="M20.2 679.7c210.3-19.1 398.9-219.6 236.5-257.5-170.5-16.8-132.5 146.2-6.8 184.7 141.6 55.7 242.3-9.9 215.3-89.3-43.7-94-330-292-85-347.3 135.5-18.7 251 54.7 302.9 141.5 50.2 85 25.5 183.8 136.6 248.6C1000 627 1037.7 427 1039 395.7c20.3-196.6-133.8-218-199.5-170s-11.3 138.5 107 114S1126.7 147.6 1092.6 67c-2.4-12.2-1.4-23.1 9.2-31.8 100.8-49.4 112.2 198.4 239-23.8" />
        <path id="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="2" stroke-dasharray="10 20.1" d="M20.2 679.7c210.3-19.1 398.9-219.6 236.5-257.5-170.5-16.8-132.5 146.2-6.8 184.7 141.6 55.7 242.3-9.9 215.3-89.3-43.7-94-330-292-85-347.3 135.5-18.7 251 54.7 302.9 141.5 50.2 85 25.5 183.8 136.6 248.6C1000 627 1037.7 427 1039 395.7c20.3-196.6-133.8-218-199.5-170s-11.3 138.5 107 114S1126.7 147..........完整代码请登录后点击上方下载按钮下载查看