svg+css实现一张图片实现更换00汽车效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现一张图片实现更换00汽车效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">

    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        .container {
            height: 100%;
            width: 100%;
        }
        .container svg {
            position: relative;
            z-index: 2;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            mix-blend-mode: multiply;
        }
        .container svg.shiny {
            mix-blend-mode: color-burn;
        }
        .container svg path {
            fill: transparent;
            transition: fill 160ms ease;
            will-change: fill;
        }
        .container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: auto;
            z-index: 1;
        }

        .options {
            position: fixed;
            z-index: 3;
            bottom: 2rem;
            left: 2rem;
            display: flex;
            gap: 0.5rem;
        }
    </style>



</head>

<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 950 535">
            <path class="alloys" d="M426.1 361.1c-.5-17.9-7.2-62.2-37.1-62.2s-34.2 47.4-34.2 47.4c-3.8 24.5 9.1 74.4 37.1 74.4s34.6-41.9 34.2-59.6zm-56.8 4.8l.2-16.9 2.6 2.8.3 11.3-3.1 2.8zm42.1-42.8l4.9 5.3-13.7 14.6-1-1.5 9.8-18.4zm-35.6 66.2l-2.8-3.2 6.5-10.5 1.7.8-5.4 12.9zm5.6-49.4c-.2-.3-5.2-7.4-8-12.3l1.7-3.6c2.1 5.7 4.6 11.2 7.6 16.4l-1.3-.5zm6.5 61.7s-.3-9.3 1.5-12.5c0 0 3.1-2 4.5 1.3s4.6 14.3 4.6 14.3-7 .2-10.6-3.1zm7.2-76c-.3.8-1 1.3-1.8 1.2h-1c-1.4 0-2.7-1.1-2.9-2.5-.6-3.9-.9-6.9-.6-10.9l10.2-.4s-2.1 7.5-3.9 12.6zm17.3 70.5c-4.1-5.8-7.4-12.5-10.3-19l-2.3-2.2 1.2-1.6s11.3 15 15.1 18.1l-3.7 4.7zm10-22.7l-7.3-5.3c-1.4-1-2.2-2.6-2.2-4.3l-.5-10.7 8-8.6c2.3 13.3 2 29 2 28.9z" />
            <path class="alloys" d="M155 283.3s-14.1-.6-14.1 37.9 8.8 48.5 14.6 48.7 14.1-13.1 13.8-44.3-7.4-42.3-14.3-42.3z" />
            <path fill="transparent" d="M340.9 231.8l-.4 6.9 7.7 3.3 1.1-8s-3.7-1.5-8.4-2.2z" />
            <path class="body" d="M838 318.1c-1.1-4.1-3.4-13.8-3.4-23.8 0-13.3-4.3-20.6-6.6-25.2-1.9-3.7-4.1-11.4-5-14.4-.2-.7-.9-1.1-1.6-1-3.3.6-12.3 2.2-18.3 2.7-1.5.1-3-.5-4-1.7-3.5-4.2-11.5-15.2-9.7-27.4 2.3-15.6-1-16.3-7-19.9s-52.8-30.5-92.2-41.5c0 0-30.9-21.9-46.8-33.2S580.1 87.6 505.2 80c-75-7.6-200.4-20.2-272.4 10.9 0 0-31.7 12.7-38.5 24.9-9.6 17.3-18.7 46.9-28.2 58.1-10.7 12.6-19.9 29.2-22.9 46.8-2.7 15.6-4 37-8.5 49.7-1.4 4.1-2.1 8.4-2.1 12.8 0 6 .3 14.5 2 23.1 0 0-1.3-53.8 16.9-53.4 16.4.3 32.8 67 40.3 83.2 1 2.1 2.9 3.5 5.1 3.9l145 27s-.7-21.6 2.3-35.2c0 0-4-68.4 37.2-73 0 0 22.9-4 42.8 49.4 19.1 51.3 17.4 70.7 31 82.5 1.1 1 2.5 1.5 3.9 1.6 15.1 1.1 108 7.8 194 4.1 79.5-3.4 146.3-10.3 165-12.4 3.7-.4 7.1-2.4 9.2-5.5 1.3-1.9 2.7-4.2 3.8-7 1-2.4.7-5.1-.8-7.2-.8-1.1-.9-2.6-.1-3.8v-.1c.7-1 .8-2.3.3-3.4l-4.7-10.6c-1-2.1-1.4-4.5-1.2-6.8l.7-10c0-.4.3-.8.7-.9 1.8-.6 6.8-2.5 11-6.9 1-.8 1.4-2.3 1-3.7zM815 267c3.1-.1 5.4 2.7 4.8 5.7-2.3 12-9.1 38.5-20.1 48.9-14.4 13.5-91.2 15.8-135 11.4-33.4-3.3-46.4-17.6-71.8-57.1-1.7-2.7.2-6.3 3.4-6.3 31.7-.1 156.9-.7 218.7-2.6zm-477.5-77.5c-.1 0-.2.1-.2.2 0 1.1-.1 5.8-4.9 7.2-6.9 2.1-11.9.6-14.6-4.1s-6.6-8.6-6.6-8.6-54.2-8.1-75.1-9.4c-14-.9-26.6-1.7-34.7-2.3-1.9-.1-3.7-1.1-4.9-2.7-2.5-3.5-6.1-10.3-4-18.2l2.1.3s.3-21.2 10.6-33.2c10.3-11.9 37.8-24.9 65.7-28.5 27.9-3.6 53.1 5 63.4 21.6 10.3 16.6 35.7 55.9 37.3 70.2 1.7 14.2-.8 12.8-34.1 7.5zm64.8-29.2s-8.3 1.3-15.6-7.3c-7.3-8.6-34.2-60.7-51.8-71.3 0 0 149-8 223.3 12.9l3-.7s55.7 19.3 110.5 67.4c.6.5 1.5.6 2.1.1l3.2-2.2 10.3 6.9c-3.5.2-10.3.3-22.2-.3-19.3-.9-54.4-5.5-262.8-5.5zm51.8 83.7c-13.8-15.8-20.9-32.9-22.5-37.5-.2-.7 0-1.4.6-1.8l3.5-2.4c16-12.4 47.9 2.6 101.8 15.5 45 10.8 55.9 23.7 62.2 32.4 2.5 3.4-.1 8.1-4.2 7.9l-79.6-3.5c0 4.2 3.3 8.7 5.4 11.8.9 1.3-.2 3.1-1.8 2.9-18.8-2.1-50.7-8.4-65.4-25.3zm366.7 125.8c-3.1 2.2-6.8 3.7-10.6 4.2-16.6 2.4-66 9.1-112.7 10.4-9.5.3-19.8.4-30.6.4-54.3 0-119-2.6-132.9-3.9-16.6-1.5-49.5-5.2-51.9-8.5-3.8-5.1-6.3-2.1-8.4-5.1-2.9-4 15.2-26 26-.........完整代码请登录后点击上方下载按钮下载查看