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