js+svg实现眼睛跟随鼠标移动的毛毛虫效果代码-html代码-BFW代码库

js+svg实现眼睛跟随鼠标移动的毛毛虫效果代码

代码语言：html

所属分类：其他

代码描述：js+svg实现眼睛跟随鼠标移动的毛毛虫效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background-color: rgb(36, 89, 28);
          background: linear-gradient(
            0deg,
            rgba(36, 89, 28, 1) 0%,
            rgba(36, 89, 28, 1) 36%,
            rgba(255, 255, 255, 1) 36%,
            rgba(255, 255, 255, 1) 100%
          );
        }
        
        .innerGroup {
          transform-box: fill-box;
          transform-origin: center;
        }
        
        .eye_group {
          transform-box: fill-box;
          transform-origin: 50% 65%;
          -webkit-animation: blinkAnim 3000ms linear infinite;
                  animation: blinkAnim 3000ms linear infinite;
        }
        
        .innerGroup rect:first-of-type {
          -webkit-animation: blackAnim 3000ms linear infinite;
                  animation: blackAnim 3000ms linear infinite;
        }
        #Smile {
          transform-box: fill-box;
          transform-origin: center;
          -webkit-animation: smileAnim 3000ms linear infinite;
                  animation: smileAnim 3000ms linear infinite;
        }
        @-webkit-keyframes smileAnim {
          0% {
            transform: translateY(0);
          }
          88% {
            transform: translateY(0);
          }
          90% {
            transform: translateY(5%);
          }
          95% {
            transform: translateY(-10%);
          }
          100% {
            transform: translateY(0);
          }
        }
        @keyframes smileAnim {
          0% {
            transform: translateY(0);
          }
          88% {
            transform: translateY(0);
          }
          90% {
            transform: translateY(5%);
          }
          95% {
            transform: translateY(-10%);
          }
          100% {
            transform: translateY(0);
          }
        }
        
        @-webkit-keyframes blinkAnim {
          0% {
            transform: scaleY(1);
          }
        
          88% {
            transform: scaleY(1);
          }
        
          90% {
            transform: scaleY(1.1);
          }
        
          93% {
            transform: scaleY(0.05);
          }
        
          97% {
            transform: scaleY(0.05);
          }
        
          100% {
            transform: scaleY(1);
          }
        }
        
        @keyframes blinkAnim {
          0% {
            transform: scaleY(1);
          }
        
          88% {
            transform: scaleY(1);
          }
        
          90% {
            transform: scaleY(1.1);
          }
        
          93% {
            transform: scaleY(0.05);
          }
        
          97% {
            transform: scaleY(0.05);
          }
        
          100% {
            transform: scaleY(1);
          }
        }
        
        @-webkit-keyframes blackAnim {
          0% {
            fill: white;
          }
        
          90% {
            fill: white;
          }
        
          93% {
            fill: #424242;
          }
        
          97% {
            fill: #424242;
          }
        
          100% {
            fill: white;
          }
        }
        
        @keyframes blackAnim {
          0% {
            fill: white;
          }
        
          90% {
            fill: white;
          }
        
          93% {
            fill: #424242;
          }
        
          97% {
            fill: #424242;
          }
        
          100% {
            fill: white;
          }
        }
    </style>




</head>

<body>
    <svg width="100vw" height="100vh" viewBox="0 0 332 332" fill="none" xmlns="http://www.w3.org/2000/svg" onmousemove="moveFunc(event);" ontouchmove="moveFunc(event);">
  <g id="Worm_Frame">
    <rect width="332" height="332" fill="white" />
    <rect id="Grass" y="215" width="332" height="117" fill="#24591C&qu.........完整代码请登录后点击上方下载按钮下载查看