jquery+svg实现女孩头部眼神跟随鼠标方向动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：jquery+svg实现女孩头部眼神跟随鼠标方向动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
    <style>
        body {
            background-color: #1F1F1F;
            overflow: hidden
        }
        .frame {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .perspective {
            -webkit-perspective: 1000px;
            perspective: 1000px;
            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
        }

        .preserve-3d {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .avatar {
            position: absolute;
            transform: scale(0.9);
            width: 100%;
            height: 100%;
            z-index: 20;
        }

        svg {
            position: absolute;
            overflow: hidden;
        }

        #svga-group-hair-back {
            -webkit-transform: translateZ(90px);
            transform: translateZ(90px);
        }

        #svga-group-ears {
            -webkit-transform: translateZ(30px);
            transform: translateZ(30px);
        }

        #svga-group-faceshape-single {
            -webkit-transform: translateZ(40px);
            transform: translateZ(40px);
        }

        #svga-group-eyes {
            -webkit-transform: translateZ(70px);
            transform: translateZ(70px);
        }

        #svga-group-mouth-single {
            -webkit-transform: translateZ(75px);
            transform: translateZ(75px);
        }

        #svga-group-nose-single {
            -webkit-transform: translateZ(85px);
            transform: translateZ(85px);
        }

        #svga-group-hair-front {
            -webkit-transform: translateZ(90px);
            transform: translateZ(90px);
        }

        a.iprodev {
            line-height: normal;
            font-family: VarelaRound, sans-serif;
            font-weight: 600;
            text-decoration: none;
            font-size: 13px;
            color: #A7AAAE;
            position: fixed;
            left: 20px;
            bottom: 20px;
            border: 1px solid #A7AAAE;
            padding: 12px 20px 10px;
            border-radius: 50px;
            transition: all .1s ease-in-out;
            text-transform: uppercase;
        }

        a.iprodev:hover {
            background: #A7AAAE;
            color: white;
        }
    </style>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="frame perspective">
  <div class="parallax preserve-3d avatar">
    <svg xmlns="http://www.w3.org/2000/svg" id="svga-group-hair-back" width="100%" height="100%" version="1.1" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 230">
      <g transform="translate(0 10)">
        <g>
          <path d="M156.79,87.186c1.245-4.645,2.08-9.934,2.312-14.214h11.529c1.834,3.925,2.658,6.08,3.9,7.933c-1.84-0.72-3.965-1.467-7.809-4.972c0.318,0.854,4.324,12.487,4.587,14.493c-3.391-2.793-4.635-5.812-6.713-8.063c1.206,8.371,1.873,12.796-2.654,23.504C159.181,90.365,157.449,87.622,156.79,87.186zM34.506,74.599c-0.217,8.956-2.898,15.556-12.347,23.446c2.96-0.94,5.61-2.43,10.271-5.06c0.8-2.13,1.51-4.561,1.79-6.8c-0.82,7.9-5.598,13.347-1.274,22.677c0.606-7.783,3.254-13.309,10.093-17.755c-0.216,0.149-0.716,0.513-1.372,1.089c0.747-0.612,1.527-1.188,2.333-1.728c-1.567-4.835-2.861-12.029-2.909-15.869H34.506z M33.478,81.232c-1.485-1.845-2.84-4.664-3.422-6.633h4.441C34.344,75.986,34.038,79.067,33.478,81.232z"
          fill="#976f50" stroke-width="none" opacity="1" />
          <path d="M173.749,80.275c-1.258-1.878-2.29-4.05-3.289-6.204h1.082c1.02,2.248,2.179,5.013,3.497,7.194c-3.51-1.04-5.28-2.09-7.91-4.72c3.17,7.87,3.66,11.71,5.19,14.94c-4.49-2.72-5.15-6.06-7.49-8.73c1.51,7.79,2.98,13.92-3.43,25.09c0-6.07-1.29-13.851-3.55-19.8c3.289,3.15,3.819,13.52,4.079,17.08c1.011-2.39,1.851-4.84,2.511-7.37c1.75-6.68,0.18-12.78-0.15-15.8c1.913,1.238,4.051,5.872,6.9,8.22c-1.801-4.38-2-6.61-5.399-15.54C168.6,77.325,171.119,79.245,173.749,80.275z M32.749,108.115c-3.38-8.12,0.65-14.03,1.47-21.93c-0.28,2.24-1.09,4.37-1.89,6.5c-4.66,2.63-6.61,4.12-9.57,5.06c9.449-7.89,11.529-13.99,11.747-22.946h-0.108c-0.153,1.387-0.459,3.801-1.019,5.966c-1.485-1.845-2.559-4.216-3.141-6.185l-1.204,0.011c0.695,2.252,2.058,4.925,4.075,7.094c-1.63,6.99-6.84,12.3-12.02,16.88c3.33-0.1,7.88-2.78,10.79-4.66c-2.09,5.7-2.23,10.66,1.77,17.57c-0.246-10.686,5.281-16.878,8.017-19.28c0.656-0.576,1.156-0.94,1.372-1.089C36.199,95.554,33.355,100.333,32.749,108.115z"
          fill="#784b28" stroke-width="none" opacity="1" />
        </g>
      </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" id="svga-group-ears" width="100%" height="100%" version="1.1" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 230">
      <g transform="translate(0 10)">
        <g id="svga-group-ears-left" transform="matrix(0.9499999 0 0 0.9499999 2.273779457522963 4.823034586540601) translate(0 1)">
          <path id="SvgjsPath3340" d="M47.001 83.974c-1.376-2.313-5.638-7.997-9.98-6.603 -2.749 0.882-3.293 3.765-3.735 6.311 -0.588 3.386 0.471 10.083 1.389 12.503 0.881 2.325 3.533 6.816 5.264 8.527 2.13 2.1 4.775 8.793 5.194 9.487 0.66 1.097 1.536 2.745 4.122 2.538 2.853-0.229 4.584-1.742 5.856-1.999C58.253 114.109 50.582 89.995 47.001 83.974z"
          fill="#f3d4cf" stroke="#c5796d" stroke-width="1.5" opacity="1" />
          <path id="SvgjsPath3341" d="M44.197 97.997c-0.132-0.548 0.007-1.47 0.142-2.362 0.124-0.812 0.24-1.579 0.169-2.121 -0.267-2.032-1.773-5.893-2.757-7.985 -1.132-2.407-2.963-5.439-5.262-6.221 -0.95-0.324-1.575 0.063-1.938 0.456 -0.266 0.289-0.325 0.627-0.238 0.667 0.086 0.04 0.285-0.24 0.572-0.504 0.235-0.216 0.579-0.402 1.051-0.363 -0.19 1.011-1.167 6.49-0.744 10.225 0.333 2.938 1.593 5.131 1.79 5.46 0.029 0.346 0.077 0.685 0.148 1.014 0.929 4.287 4.971 9.163 6.378 10.758 0.259 0.295 0.531 0.47 0.598 0.398 0.066-0.072-0.094-0.364-0.353-0.66 -1.388-1.585-5.391-6.442-6.289-10.579 -0.952-4.389 2.318-10.896 3.048-12.272 0.371 0.646 0.687 1.267 0.93 1.785 0.19 0.406 0.402 0.881 0.619 1.395 -0.429 0.718-3.434 5.958-2.338 10.153 0.406 1.546 2.235 3.54 3.447 4.086 0.667 0.301 0.919 0.75 1.209 1.271 0.336 0.604 0.718 1.288 1.828 1.784 0.225 0.102 0.429 0.142 0.61 0.142 0.313 0 0.551-0.126 0.725-0.276 0.018 0.266 0.017 0.604 0.009 0.917 -0.012 0.404 0.042 0.737 0.137 0.745 0.094 0.008 0.196-0.313 0.207-0.717 0.016-0.496 0.013-1.11-0.072-1.403 -0.248-0.865-1.008-1.841-1.813-2.875C45.221 99.896 44.403 98.844 44.197 97.997zM36.95 94.196c-2.177-6.731 0.656-12.54 1.144-13.464 0.85 0.775 1.6 1.811 2.21 2.824C39.86 84.365 37.041 89.669 36.95 94.196zM46.341 104.042c-1.004-0.447-1.339-1.051-1.666-1.633 -0.293-0.527-0.598-1.072-1.369-1.42 -0.168-0.075-0.352-0.191-0.542-0.323 -2.486-5.906 0.272-8.488 0.963-9.017 0.211 0.722 0.369 1.384 0.439 1.915 0.063 0.488-0.052 1.263-0.167 2.012 -0.142 0.929-0.286 1.89-0.137 2.512 0.226 0.926 1.069 2.009 1.884 3.057 0.723 0.929 1.466 1.888 1.721 2.67C47.359 103.972 47.017 104.345 46.341 104.042z"
          fill="#c5796d" stroke-width="none" opacity="1" />
        </g>
        <g id="svga-group-ears-right" transform="matrix(0.9499999 0 0 0.9499999 7.713115096609499 4.823034586540601) translate(0 1)">
          <path id="SvgjsPath3342" d="M152.736 83.974c1.377-2.313 5.639-7.997 9.98-6.603 2.75 0.882 3.293 3.765 3.736 6.311 0.588 3.386-0.471 10.083-1.389 12.503 -0.881 2.325-3.533 6.816-5.266 8.527 -2.129 2.1-4.775 8.793-5.193 9.487 -0.658 1.097-1.535 2.745-4.121 2.538 -2.854-0.229-4.584-1.742-5.857-1.999C141.484 114.109 149.156 89.995 152.736 83.974z"
          fill="#f3d4cf" stroke="#c5796d" stroke-width="1.5" opacity="1" />
          <path id="SvgjsPath3343" d="M153.727 100.913c-0.805 1.033-1.564 2.009-1.813 2.875 -0.086 0.293-0.088 0.907-0.072 1.403 0.012 0.404 0.113 0.725 0.207 0.717s0.148-0.341 0.137-0.745c-0.008-0.313-0.008-0.651 0.01-0.917 0.174 0.15 0.412 0.276 0.725 0.276 0.182 0 0.385-0.04 0.609-0.142 1.109-0.496 1.492-1.18 1.828-1.784 0.289-0.52 0.543-0.969 1.209-1.271 1.213-0.546 3.041-2.54 3.447-4.086 1.096-4.194-1.908-9.435-2.338-10.153 0.217-0.513 0.43-0.988 0.619-1.395 0.244-0.518 0.559-1.139 0.93-1.785 0.73 1.377 4 7.883 3.049 12.272 -0.896 4.137-4.9 8.994-6.289 10.579 -0.258 0.296-0.418 0.588-0.352 0.66 0.066 0.071 0.338-0.104 0.598-0.398 1.406-1.596 5.449-6.471 6.379-10.758 0.07-0.329 0.117-0.668 0.146-1.014 0.197-0.329 1.459-2.523 1.791-5.46 0.422-3.735-0.555-9.214-0.744-10.225 0.473-0.039 0.814 0.146 1.051 0.363 0.287 0.264 0.486 0.544 0.572 0.504s0.027-0.378-0.238-0.667c-0.363-0.393-0.988-0.779-1.938-0.456 -2.299 0.782-4.131 3.814-5.262 6.221 -0.984 2.093-2.49 5.953-2.758 7.985 -0.072 0.542 0.045 1.309 0.17 2.121 0.135 0.892 0.273 1.814 0.141 2.362C155.336 98.844 154.518 99.896 153.727 100.913zM159.434 83.555c0.611-1.013 1.361-2.049 2.211-2.824 0.488 0.925 3.32 6.733 1.145 13.464C162.697 89.669 159.879 84.365 159.434 83.555zM152.27 103.816c0.254-0.782 0.998-1.741 1.721-2.67 0.816-1.048 1.658-2.131 1.885-3.057 0.148-0.622 0.004-1.583-0.137-2.512 -0.115-0.749-0.23-1.524-0.166-2.012 0.068-0.531 0.227-1.193 0.438-1.915 0.691 0.529 3.449 3.111 0.965 9.017 -0.191 0.132-0.375 0.248-0.543 0.323 -0.771 0.348-1.074 0.893-1.369 1.42 -0.326 0.582-0.662 1.186-1.666 1.633C152.721 104.345 152.379 103.972 152.27 103.816z"
          fill="#c5796d" stroke-width="none" opacity="1" />
        </g>
      </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" id="svga-group-faceshape-single" width="100%" height="100%" version="1.1" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 230">
      <g transform="translate(0 10)">
        <path id="SvgjsPath2753" d="M140.204 113.007c0.035 22.275-17.995 40.365-40.273 40.396 -22.274 0.036-40.361-17.993-40.396-40.272C59.501 90.857 77.53 72.77 99.808 72.735 122.083 72.701 140.171 90.73 140.204 113.007z" fill="url(#SvgjsRadialGradient2754)"
        opacity="1" />
        <p.........完整代码请登录后点击上方下载按钮下载查看