jquery实现的鼠标移动视觉差异动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现的鼠标移动视觉差异动画效果代码

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

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

<head>

    <meta charset="UTF-8">





    <style>
        html,body {
            padding: 0;
            margin: 0;
            position: relative;
        }
        div {
            display: block;
            position: relative;
        }
        svg {
            max-width: 100%;
        }
        a {
            position: fixed;
            top: 2em;
            left: 2em;
            z-index: 99999;
            text-decoration: none;
            color: #FFF;
            padding: .5em;
            font-family: arial;
            border: 2px solid #FFF;
        }
    </style>


</head>

<body>
    <div>
        <svg class="parallax" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 805 603.8"><style>
            .tt0 {
                fill: url(#SVGID_1_);
            }

            .tt1 {
                fill: url(#SVGID_2_);
            }

            .tt2 {
                fill: url(#SVGID_3_);
            }

            .tt4 {
                fill: url(#SVGID_5_);
            }

            .tt5 {
                fill: #2B9BCC;
            }

            .tt7 {
                fill: #DBDBDB;
            }

            .tt8 {
                fill: #F9F9F9;
            }

            .tt9 {
                fill: #C7A65A;
            }

            .tt10 {
                fill: #FFFFFF;
            }

            .tt11 {
                fill: #C8F7C6;
            }

            .tt12 {
                fill: #E2C07D;
            }

            .tt13 {
                fill: #34485E;
            }

            .tt14 {
                fill: #A38241;
            }

            .tt15 {
                fill: none;
                stroke: #F9F9F9;
                stroke-width: 0.5;
                stroke-miterlimit: 10;
            }

            .tt16 {
                fill: none;
                stroke: #4F4F4F;
                stroke-width: 0.5;
                stroke-miterlimit: 10;
            }

            .tt17 {
                fill: #F4C362;
            }

            .tt18 {
                fill: url(#SVGID_6_);
            }

            .tt19 {
                fill: #007055;
            }

            .tt20 {
                fill: #3D3D3D;
            }

            .tt21 {
                fill: #C92A37;
            }

            .tt22 {
                fill: none;
                stroke: #3D3D3D;
                stroke-miterlimit: 10;
            }

            .tt23 {
                fill: #E0E0E0;
            }

            .tt24 {
                clip-path: url(#SVGID_8_);
            }

            .tt25 {
                fill: #D6A143;
            }
        </style>
            <g class="bg1"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-22.225" y1="128.955" x2="824.15" y2="233.271"><stop offset="0" stop-color="#6CB8F1" /><stop offset="1" stop-color="#99B8F1" /></linearGradient><path class="tt0" d="M-34.5-25.9h874v414.4h-874z" /><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-36.344" y1="237.407" x2="842.139" y2="345.681"><stop offset="0" stop-color="#89CDF7" /><stop offset="1" stop-color="#89CDD7" /></linearGradient><path class="tt1" d="M712.5 251.4c-58.1-6-68.9-43.1-174.4-43.1s-259.4 69.9-316.4 61.1c-57-8.7-88.3-29.5-135.6-40.4-47.4-10.9-120.6-6.5-120.6-6.5v144.6h874V215.9c-35.5 2.2-68.9 41.5-127 35.5zm-698 0c-11 0-19.9-3.7-19.9-8.2 0-4.5 8.9-8.2 19.9-8.2 11 0 19.9 3.7 19.9 8.2 0 4.5-8.9 8.2-19.9 8.2zm44.1 13.2c-6.8 0-12.3-2.3-12.3-5.1s5.5-5.1 12.3-5.1c6.8 0 12.3 2.3 12.3 5.1 0 2.9-5.5 5.1-12.3 5.1zm474.7 3.2c-22.5 0-40.8-7.3-40.8-16.4 0-9 18.3-16.4 40.8-16.4 22.5 0 40.8 7.3 40.8 16.4 0 9-18.3 16.4-40.8 16.4z" /><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="378.782" y1="287.133" x2="839.332" y2="343.896"><stop offset="0" stop-color="#18A7AA" /><stop offset="1" stop-color="#188BAA" /></linearGradient><path class="tt2" d="M804.6 296.7l-15.9-.7-3.6-8.3-3.5 8-92.2-3.8-4.6-10.9-4.6 10.5-9.4-.4L634 299l-2-4.7-2.4 5.6-105.4 22.5-41.6-1.3-2-4.6-1.9 4.5-9.5-.3-4.2-9.7-4.1 9.5-21.4-.7-16.6 5.6-3.3-7.8-4.4 10.4-43.2 14.5h467.5v-54.8" /><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="402.516" y1="140.948" x2="402.516" y2="-19.437"><stop offset="0" stop-color="#FFF" stop-opacity="0" /><stop offset=".8" stop-color="#FFF" /></g>
                <g class="bg2"><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-45.333" y1="430.686" x2="850.365" y2="541.081"><stop offset="0" stop-color="#498EC4" /><stop offset="1" stop-color="#2694C4" /></linearGradient><path class="tt4" d="M-34.5 342.5h874v286.7h-874z" /><path class="tt5" d="M-34.5 603.1h249.1l-89.6-16 272.4-12-58.6-8.8h96l-18.2-8.7 235-9.8 125.6-16.4h62.3v98.2h-874M357.4 503.1l34.7 12.1 192-3.2 46.3-6.7M453.5 425.5l-165.9-29H-34.5V443h441.4l-48.7-7.5M418.3 440.5h64.3l-29.1-5.9M574.1 404.1h-189l88.4 15.6M-13.7 534.1h228.3L46.3 545.6" /></g>
                <g class="bg3"><path class="tt7" d="M437.3 479h48.2v12.3h-48.2z" /><path class="tt7" d="M479.2 475.4h25.3v5.7h-25.3zM518.8 473.1h15.6v8.1h-15.6zM408.2 483.7h24.9v5h-24.9z" /><path class="tt8" d="M396.9 477.1h13.8V488h-13.8z" /><path class="tt9" d="M506.8 476.7h13.8v7.7h-13.8z" /><path class="tt10" d="M513.3 257.1s-30.7 159.8-58.4 196.1l58.4 7.3V257.1zM555.7 301.1s5.8 103.8-6.8 135.6c0 0 27.4 10.4 48.2 14.2 20.8 3.8 21.3 9.7 21.3 9.7s-46.2-126.8-62.7-159.5z" /><path class="tt11" d="M513.3 214.6s35.6 49 104.3 250.1l3.3-.4s-57.4-178.8-104.4-252.2l-3.2 2.5z" /><path class="tt9" d="M511.5 212.2h3.7v273h-3.7z" /><path class="tt12" d="M509 467.4h8.7v17H509z" /><path class="tt8" d="M468.2 480.4H560v10.9h-91.8z" /><path class="tt8" d="M526.6 478.3h22.3v5.4h-22.3z" /><path cl.........完整代码请登录后点击上方下载按钮下载查看