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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看