js实现目光聚集盯着鼠标跟随点击动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现目光聚集盯着鼠标跟随点击动画效果代码

代码标签: css 目光 聚集 鼠标 点击

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{margin:0;overflow:hidden}
        
        .root{
          width: 100vw;
          height: 100vh;
          background: black;
          overflow: hidden;
        }
        
        .eye {
          position: absolute;
          border-radius: 50%;
          height: 100px;
          width: 100px;
          background: transparent;
          _border: 1px solid red;
          transition: left 5s, top 5s;
        }
        .eye:after { /*pupil*/
          position: absolute;
          top: 0;
          left: 50%;
          width: 20px;
          height: 40px;
          background: currentColor;
          border-radius: 5px;
          content: " ";
        }
    </style>


</head>

<body>
    <div class="root"></div>


    <script>
      console.clear();

const root = document.querySelector(".root");

const randomNumberBetween = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0