HTML+CSS3+JS实现表情的眼睛跟着鼠标动_眼睛跟着鼠标动的笑脸-CSDN博客

本文链接：https://blog.csdn.net/weixin_38012327/article/details/111465852

在这里插入图片描述
小黄人表情

  (function (doc, win) {
        var docEl = doc.documentElement, //文档根标签
          resizeEvent =
            "orientationchange" in window ? "orientationchang" : "resize"; //viewport变化事件源
        var rescale = function () {
          win.clientWidth = docEl.clientWidth;
          if (!win.clientWidth) return; // (屏幕宽度/设计图宽度) = 缩放或扩大的比例值;
          docEl.style.fontSize = 36 * (win.clientWidth / 375) + "px";
            console.log( docEl.style.fontSize)
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvent, rescale, false);
        doc.addEventListener("DOMContentLoaded", rescale, false);
      })(document, window);

根元素适配

<style>
     * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }
     .container {
       min-height: 100vh;
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
     }
     .container .face {
       position: relative;
       width: 3rem;
       height: 3rem; 
       background-color:#f1c40f;
       border-radius: 50%;
       margin: 0 0.1rem;
       display: flex;
       justify-content: center;
       align-items: center; 
       cursor: pointer;      
     }
     .container .face:before{
       content: "";
       position: absolute;
       top: 1.8rem;
       width: 1.5rem;
       height: 0.7rem;
       border-bottom-left-radius: 0.7rem;
       border-bottom-right-radius: 0.7rem;
       background-color: #b57700;
       transition: 0.5s;
     }
     .container .face:hover:before{
         top: 2.1rem;
         width: 1.5rem;
         height: 0.2rem;
         background-color: #d35400;
         border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
     .container .face:hover{
       background:linear-gradient(180deg,#f44336,#ffcd00);
     }
     .container .face .eyes{
       position: relative;
       top: -0.5rem;
       display: flex;
       flex-wrap: wrap;
     }
     .container .face .eyes .eye{
        position: relative;
        width: 1rem;
        height: 1rem;
        display: block;
        border-radius: 50%;
        background-color: white;
        margin: 0 0.1rem;
     }
     .container .face .eyes .eye:before{
         content: "";
         position: absolute;
         top: 50%;
         left: 0.3rem;
         width: 0.5rem;
         height: 0.5rem;
         border-radius: 50%;
         background: black;
         transform: translate(-50%,-50%);
     }
   </style>

style 样式

 <body>
    <!-- [if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif] -->
    <div class="container">
      <div class="face">
        <div class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </div>
      </div>
      <div class="face">
        <div class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </div>
      </div>
      <div class="face">
        <div class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </div>
      </div>
    </div>
    <script>
        document.querySelector("body").addEventListener('mousemove',eyeball);
        function eyeball(){
            // console.log(1)
            var eye=document.querySelectorAll(".eye");

            eye.forEach(function(eye){
                let x=(eye.getBoundingClientRect().left+eye.clientWidth/2);
                let y=(eye.getBoundingClientRect().top+eye.clientHeight/2);
                let radian=Math.atan2(event.pageX-x,event.pageY-y);
                let rot=(radian*(180/Math.PI)*-1)+270;
                eye.style.transform="rotate("+rot+"deg)";
            })
        }
    </script>
  </body>
</html>