css+js实现跟随鼠标交互的无望的机器人效果代码-html代码-BFW代码库

css+js实现跟随鼠标交互的无望的机器人效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现跟随鼠标交互的无望的机器人效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --orange: hsl(30deg, 100%, 50%);
          --eyeoffsetX: 0;
          --eyeoffsetY: 0;
          --earsrotation: 40deg;
          --headrotation: 0deg;
          --transitionInterval: 2s;
        }
        
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          padding: 0;
          margin: 0;
          transition-property: all;
          transition-duration: var(--transitionInterval);
        }
        
        body {
          background-color: #331a00;
        }
        
        .head-wrapper {
          position: fixed;
          top: calc(50% - 200px);
          left: calc(50% - 200px);
          width: 400px;
          height: 400px;
          perspective: 500px;
        }
        
        .head-inner {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          perspective: 500px;
          transform: rotateY(var(--headrotation));
        }
        
        .head {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: var(--orange);
        }
        .head:before {
          position: absolute;
          content: "";
          left: -50px;
          top: calc(50% - 20px);
          height: 40px;
          width: calc(100% + 100px);
          background-color: #646464;
          z-index: -3;
          border-radius: 20px;
        }
        .head:after {
          position: absolute;
          content: "";
          left: -20px;
          top: calc(50% - 20px);
          height: 40px;
          width: calc(100% + 40px);
          background-color: #646464;
          z-index: -1;
          border-radius: 20px;
        }
        
        .eyes {
          position: absolute;
          top: 30%;
          left: 2%;
          width: 96%;
          height: 40%;
          background-color: black;
          border-radius: 100px;
          perspective: 500px;
          transform: translateX(calc(var(--eyeoffsetX) / 2)) translateY(calc(var(--eyeoffsetY) / 2));
        }
        .eyes .nose {
          position: absolute;
          bottom: -40px;
          left: calc(50% - 40px);
          width: 80px;
          height: 80px;
          background-color: var(--orange);
          border-radius: 50%;
        }
        .eyes:before, .eyes:after {
          position: absolute;
          top: 40px;
          width: 120px;
          height: 120px;
          border: 15px solid white;
          content: "";
          border-radius: 50%;
          -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                 .........完整代码请登录后点击上方下载按钮下载查看