八子形赛道svg赛车比赛效果-html代码-BFW代码库

八子形赛道svg赛车比赛效果

代码语言：html

所属分类：动画

代码描述：八子形赛道svg赛车比赛效果

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

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

</head>
<body translate="no">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100vw" height="100vh">

        <defs>
            <path id="track" stroke="black" stroke-width="1" fill="none" d="M 200,200 L 300,200 A 50,50 0 1 1 250,250
                L 250,150 A 50,50 0 1 0 200,200"></path>
        </defs>

        <g transform=" rotate(-45), translate(-600, -200), scale(3)">
            <path id="bigTrack" stroke="black" stroke-width="16" fill="none" d="M 200,200 L 241,200 M 259 200 L 300,200 A 50,50 0 1 1 250,250
                L 250,150 A 50,50 0 1 0 200,200"></path>

            <mask id="Mask">
                <rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
                <path id="overUnder" fill="black" d="M 240,192 L 240,208 L 260,208 L 260,192 Z">
                    <animate dur="10s" attributeName="fill" calcMode="discrete" repeatCount="indefinite" values="black; white" keyTimes="0; 0.3"></animate>
                </mask>

                <g mask="url(#Mask)">
                    <g id="car" stroke="black" stroke-width=" 0.5" transform="scale(0.2), rotate(90 30 0)">
                        <path fill="DODGERBLUE" d="M 20 10 L 40 10
                            C40,10 50,10 50,20
                            L 50 80
                         .........完整代码请登录后点击上方下载按钮下载查看