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

svg路径动画效果

代码语言：html

所属分类：动画

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

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

    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        /* center in the viewport */
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        body > svg {
            display: block;
            width: 80vw;
            max-width: 500px;
            height: auto;
        }

        /* animate the group describing the bicycle along a prescribed path */
        #bicycle {
            offset-path: path("M 0 0 l 200 -200 a 50 50 0 0 1 50 0 l 100 100 a 50 50 0 0 0 50 0 l 125 -125");
            offset-distance: 0%;
            animation: offsetDistance 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
        }
@keyframes offsetDistance {
            to {
                offset-distance: 100%;
            }
        }
    </style>

</head>
<body translate="no">

    <svg viewBox="0 0 700 500" width="700" height="500">
        <defs>

            <g id="bicycle">
                <svg viewBox="0 0 100 60" x="-75" y="-45" width="150" height="90">
                    <g fill="none" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="21" cy="39" r="19" />
                        <circle cx="21" cy="39" r="7" />
                        <circle cx="48" cy="39" r="6" />
                        <path d="M 40 39 h -19 l 15 -25 h 29 l 15 25 m -13.2 -22 l -14 15" />
                        <path d="M 44 32 l -12 -27 h -6 h 10 q 5 0 5 2" />
                        <path d="M 65 13 l -5 -12 h -2 h 15 a 6 6 0 0 1 0 12" />
                        <circle cx="79" cy="39" r="19" />
                        <circle cx="79" cy="39" r="7" />
                    </g>
                </svg>
            </g>

            <clipPath id="clip--blue" clipUnits="userS.........完整代码请登录后点击上方下载按钮下载查看