抓取鼠标动画

news2025/10/31 7:57:23

今天给大家分享一个抓取鼠标的动画，嗯，真的是抓取鼠标！
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:200,700&display=swap" rel="stylesheet">
  <link href="https://unpkg.com/backpack.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
  <style>
    html {
      font-size: 18px;
    }
    @media (min-width: 900px) {
      html {
        font-size: 24px;
      }
    }

    body {
      font-family: "Montserrat", sans-serif;
      font-weight: 300;
      line-height: 1.45;
      color: #0F1108;
    }

    h1 {
      font-size: 2.2rem;
      margin: 0;
      font-weight: 600;
      line-height: 1.15;
    }
    @media (min-width: 900px) {
      h1 {
        font-size: 2.488rem;
      }
    }

    h2 {
      font-size: 1.4rem;
      margin: 0.5rem 0;
      line-height: 1.15;
      font-weight: 200;
    }
    @media (min-width: 900px) {
      h2 {
        margin: 1rem 0;
        font-size: 1.44rem;
      }
    }

    p {
      margin-top: 0.25rem;
    }
    @media (min-width: 900px) {
      p {
        margin-top: 0.5rem;
      }
    }

    a {
      color: #0F1108;
      text-decoration: none;
      border-bottom: currentcolor 1px solid;
    }

    .container {
      max-width: 520px;
      margin: 0 auto;
      padding: 0 1rem 100px 1rem;
    }
    @media (min-width: 900px) {
      .container {
        max-width: 650px;
        padding: 0 1rem 90px 1rem;
      }
    }

    .app {
      position: relative;
      background: #F2E9DE;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - 2rem);
      margin: 1rem;
      overflow: hidden;
    }
    .app--debug .grab-zone {
      background: rgba(0, 0, 0, 0.15);
    }
    .app--debug .grab-zone__debug {
      display: block;
    }
    .app--debug .grab-zone__danger {
      background: rgba(0, 0, 0, 0.15);
    }
    .app--debug .grabber__arm-wrapper {
      background: rgba(0, 0, 0, 0.15);
    }

    .grab-zone-wrapper {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translateX(30%) translateY(50%);
    }

    .grab-zone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 700px;
      height: 700px;
      border-radius: 50%;
    }
    .grab-zone__danger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 400px;
      height: 400px;
      border-radius: 50%;
    }
    .grab-zone__debug {
      display: none;
      position: absolute;
      width: 300px;
      top: -100px;
      font-size: 14px;
      text-align: center;
      text-transform: uppercase;
    }

    .grabber {
      position: relative;
      width: 100px;
      height: 100px;
    }
    .grabber__arm-wrapper {
      position: absolute;
      top: -80px;
      width: 24px;
      height: 260px;
    }
    .grabber__arm {
      position: relative;
      width: 24px;
      height: 200px;
      background: #7D9A9E;
      border-radius: 20px;
      overflow: visible;
      transform: translateY(100%);
      transition: transform 0.2s ease;
    }
    .grabber__hand {
      display: block;
      position: absolute;
      top: -12px;
      transform: scale(1.4) rotate(-10deg) translateY(100%);
      transform-origin: bottom center;
      transition: transform 0.3s ease;
    }
    .grabber__face {
      position: absolute;
      width: 75px;
      height: 84px;
      right: 5%;
      transition: transform 0.3s ease;
    }
    .grabber__body {
      position: absolute;
      top: 50%;
      left: 0%;
      width: 110px;
      height: 95px;
      border-radius: 50%;
      background: #7D9A9E;
      transition: transform 0.3s ease;
    }
    .grabber--waiting .grabber__hand {
      transform: scale(1.4) rotate(-10deg);
    }
    .grabber--waiting .grabber__arm {
      transform: translateY(80%);
    }
    .grabber--waiting .grabber__face {
      transform: translateY(60%);
    }
    .grabber--stalking .grabber__hand {
      transform: scale(1.4) rotate(-10deg);
    }
    .grabber--stalking .grabber__arm {
      transform: translateY(70%);
    }
    .grabber--stalking .grabber__face {
      transform: translateY(10%);
    }
    .grabber--grabbing .grabber__face {
      transform: translateY(-40%) rotate(10deg);
    }
    .grabber--grabbing .grabber__arm {
      transform: translateY(0%);
    }
    .grabber--grabbing .grabber__body {
      transform: translateY(-20%);
    }
    .grabber--grabbing .grabber__hand {
      transform: scale(1.7) rotate(10deg);
    }
    .grabber--grabbed .grabber__arm {
      transition: transform 1s ease;
    }
    .grabber--grabbed .grabber__hand {
      transition: transform 2.5s ease;
    }
    .grabber--grabbed .grabber__face {
      transform: translateY(70%);
      transition: transform 1s ease;
    }
    .grabber--grabbed .grabber__body {
      transform: translateY(50%);
      transition: transform 1s ease;
    }
    .grabber--extended .grabber__arm {
      transform: translateY(-20%);
    }
    .grabber--extended .grabber__face {
      transform: translateY(-60%) rotate(15deg);
    }
    .grabber--extended .grabber__body {
      transform: translateY(-40%);
    }
    .grabber--shaka .grabber__arm {
      transform: translateY(50%);
    }
    .grabber--shaka .grabber__hand {
      transform: scale(2.5) translateY(10%);
      -webkit-animation: shaka 0.5s infinite alternate forwards;
      animation: shaka 0.5s infinite alternate forwards;
      transform-origin: 55% 60%;
    }
    .grabber--shaka .grabber__face {
      transform: translateY(70%);
      transition: transform 1s ease;
    }
    .grabber--shaka .grabber__body {
      transform: translateY(50%);
      transition: transform 1s ease;
    }

    .trap-button {
      position: absolute;
      bottom: 80px;
      right: 70px;
      min-width: 125px;
      background: #8ECACC;
      color: white;
      border-radius: 5px;
      padding: 0.4rem 0.5rem;
      font-weight: 600;
      font-size: 18px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .debug-button {
      position: fixed;
      top: 0;
      right: 0;
      background: transparent;
      padding: 1rem;
      margin: 1rem;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
      opacity: 0.5;
    }

    @-webkit-keyframes shaka {
      0% {
        transform: scale(2.5) translateY(0%) rotate(-20deg);
      }
      100% {
        transform: scale(2.5) translateY(0%) rotate(20deg);
      }
    }

    @keyframes shaka {
      0% {
        transform: scale(2.5) translateY(0%) rotate(-20deg);
      }
      100% {
        transform: scale(2.5) translateY(0%) rotate(20deg);
      }
    }
  </style>
</head>
<body>
<div id="app"></div>
</body>
<script>
  const { useState, useRef, useEffect, useLayoutEffect, createContext } = React;
  const CONSTANTS = {
    assetPath: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/184729" };
  const ASSETS = {
    head: `${CONSTANTS.assetPath}/head.svg`,
    waiting: `${CONSTANTS.assetPath}/hand.svg`,
    stalking: `${CONSTANTS.assetPath}/hand-waiting.svg`,
    grabbing: `${CONSTANTS.assetPath}/hand.svg`,
    grabbed: `${CONSTANTS.assetPath}/hand-with-cursor.svg`,
    shaka: `${CONSTANTS.assetPath}/hand-surfs-up.svg` };

    // 预加载图像
    Object.keys(ASSETS).forEach(key => {
     const img = new Image();
     img.src = ASSETS[key];
  });

  const useHover = () => {
    const ref = useRef();
    const [hovered, setHovered] = useState(false);
    const enter = () => setHovered(true);
    const leave = () => setHovered(false);
    useEffect(
            () => {
              ref.current.addEventListener("mouseenter", enter);
              ref.current.addEventListener("mouseleave", leave);
              return () => {
                ref.current.removeEventListener("mouseenter", enter);
                ref.current.removeEventListener("mouseleave", leave);
              };
            },
            [ref]);
    return [ref, hovered];
  };

  // 鼠标位置
  const useMousePosition = () => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    useEffect(() => {
      const setFromEvent = e => setPosition({ x: e.clientX, y: e.clientY });
      window.addEventListener("mousemove", setFromEvent);
      return () => {
        window.removeEventListener("mousemove", setFromEvent);
      };
    }, []);
    return position;
  };

  // 元件位置
  const usePosition = () => {
    const ref = useRef();
    const [position, setPosition] = useState({});
    const handleResize = () => {
      setPosition(ref.current.getBoundingClientRect());
    };
    useLayoutEffect(() => {
      handleResize();
      window.addEventListener('resize', handleResize);
      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }, [ref.current]);
    return [ref, position];
  };


  /**
   * React组件
   */
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        debug: false,
        cursorGrabbed: false,
        gameOver: false };
      this.handleToggleDebug = this.handleToggleDebug.bind(this);
      this.handleButtonClicked = this.handleButtonClicked.bind(this);
      this.handleCursorGrabbed = this.handleCursorGrabbed.bind(this);
    }
    handleToggleDebug() {
      this.setState({
        debug: !this.state.debug });
    }
    handleCursorGrabbed() {
      this.setState({
        cursorGrabbed: true });
      setTimeout(() => {
        this.setState({
          cursorGrabbed: false });
      }, 2000);
    }
    handleButtonClicked() {
      this.setState({
        gameOver: true });
      setTimeout(() => {
        this.setState({
          gameOver: false });
      }, 4000);
    }
    render() {
      const { cursorGrabbed, gameOver, debug } = this.state;
      const screenStyle = cursorGrabbed ? { cursor: "none" } : {};
      const appClass = debug ? "app app--debug" : "app";
      return(
              React.createElement("div", { className: appClass, style: screenStyle },
                      React.createElement("section", { className: "container" },
                              React.createElement("h1", null, "看这里!"),
                              React.createElement("h2", null, "欢迎使用互联网"),
                              React.createElement("p", null, "这是一个经典的网站，没有陷阱或奇怪的东西！"),
                              React.createElement("p", null, "随意浏览，放松一下，我不知道，点击下面的按钮？也可以，对吧？"),
                              React.createElement("button", {
                                className: "debug-button",
                                onClick: this.handleToggleDebug }, "调试一下？")),
                      React.createElement("button", {
                                className: "trap-button",
                                onClick: this.handleButtonClicked },
                              gameOver && "Nice one",
                              cursorGrabbed && "Gotcha!",
                              !gameOver && !cursorGrabbed && "Button!"),
                      React.createElement("div", { className: "grab-zone-wrapper" },
                              React.createElement(GrabZone, {
                                onCursorGrabbed: this.handleCursorGrabbed,
                                cursorGrabbed: cursorGrabbed,
                                gameOver: gameOver }))));
    }}

  // 悬停触发区
  const GrabZone = ({ cursorGrabbed, gameOver, onCursorGrabbed }) => {
    const [outerRef, outerHovered] = useHover();
    const [innerRef, innerHovered] = useHover();
    const [isExtended, setExtendedArm] = useState(false);
    let state = "waiting";
    if (outerHovered) {
      state = "stalking";
    }
    if (innerHovered) {
      state = "grabbing";
    }
    if (cursorGrabbed) {
      state = "grabbed";
    }
    if (gameOver) {
      state = "shaka";
    }
    useEffect(() => {
              let timer;
              if (state === "grabbing") {
                timer = setTimeout(() => {
                  setExtendedArm(true);
                  timer = null;
                }, 2000);
              }
              return () => {
                setExtendedArm(false);
                if (timer) {
                  clearTimeout(timer);
                }
              };
            },
            [state]);

    return(
            React.createElement("div", { className: "grab-zone", ref: outerRef },
                    React.createElement("div", { className: "grab-zone__debug" },
                            React.createElement("strong", null, "调试信息"),
                            React.createElement("p", null, "当前状态：", state),
                            React.createElement("p", null, "伸臂 ", isExtended ? "伸出" : "没有")),
                    React.createElement("div", { className: "grab-zone__danger", ref: innerRef },
                            React.createElement(Grabber, {
                              state: state,
                              gameOver: gameOver,
                              extended: isExtended,
                              onCursorGrabbed: onCursorGrabbed }))));
  };

  // 图形
  const Grabber = ({ state, gameOver, extended, onCursorGrabbed }) => {
    const mousePos = useMousePosition();
    const [ref, position] = usePosition();
    const hasCursor = false;

    // 计算手臂包裹器的旋转
    const x = position.left + position.width * 0.5;
    const y = position.top + position.height * 0.5;
    const angle = gameOver ? 0 : Math.atan2(mousePos.x - x, -(mousePos.y - y)) * (180 / Math.PI);

    // 确保数值在可接受的范围内（-75到75）
    const rotation = Math.min(Math.max(parseInt(angle), -79), 79);

    const grabberClass = `grabber grabber--${state} ${extended && "grabber--extended"}`;
    const wrapperStyle = { transform: `rotate(${rotation}deg)` };

    let handImageSrc = ASSETS[state];

    return (
            React.createElement("div", { className: grabberClass },
                    React.createElement("div", { className: "grabber__body" }),
                    React.createElement("img", { className: "grabber__face", src: ASSETS.head }),
                    React.createElement("div", { className: "grabber__arm-wrapper", ref: ref, style: wrapperStyle },
                            React.createElement("div", { className: "grabber__arm" },
                                    React.createElement("img", {
                                      className: "grabber__hand",
                                      src: handImageSrc,
                                      onMouseEnter: onCursorGrabbed })))));
  };

  // 渲染应用程序
  ReactDOM.render(React.createElement(App, null), document.getElementById("app"));
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/554305.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++ 位图及其应用

C++ 位图及其应用

前言 现实生活中&#xff0c;有很多场景是需要处理数据量很大的数据的&#xff0c;比如&#xff1a; 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中。 一看到这样的题&#xff0c;我们可能想到的就是 …
阅读更多...
悬赏问答|互助社区 X3.5正式版 1.5

悬赏问答|互助社区 X3.5正式版 1.5

模板演示站： 以下3个演示地址均为本模板设置的不同界面效果，演示站已启用了我们百变百搭-APP手机版，如需体验手机版可使用手机浏览器或微信中打开： 模板演示效果地址1：http://demo.1009.com.cn/012 模板演示效果地址2：http://demo.1009.com.cn/012a 模板演示效果地址3：h…
阅读更多...
Handler相关问题

Handler相关问题

Handler相关问题 1、设计 Handler 的初衷&#xff1f;2、一个线程有几个 Looper&#xff1f;几个 Handler&#xff1f;3、Handler 内存泄漏原因&#xff1f; 以及最佳解决方案&#xff1f;4、为何主线程可以 new Handler&#xff1f;如果想要在子线程中 new Handler 要做些什么…
阅读更多...
docker是怎么决定容器内容存储到哪个目录的？（存储驱动决定的）（乱七八糟的）（df -Th查看目录文件系统类型、查看文件系统类型）

docker是怎么决定容器内容存储到哪个目录的？（存储驱动决定的）（乱七八糟的）（df -Th查看目录文件系统类型、查看文件系统类型）

文章目录 docker是怎么决定容器内容存储到哪个目录的&#xff1f;docker对我/var这个目录有没有什么要求&#xff0c;比如要求它的文件系统是指定的类型如果我Docker的默认存储驱动是overlay2&#xff0c;但是我/var目录的文件系统不是overlay2&#xff0c;这没影响吗&#xff…
阅读更多...
人工智能MINIST手写数字识别之MINIST概念

人工智能MINIST手写数字识别之MINIST概念

MNIST是一个简单的视觉计算数据集，它是像下面这样手写的数字图片： MNIST 每张图片还额外有一个标签记录了图片上数字是几，例如上面几张图的标签就是：5、0、4、1。 MINIST数据 MINIST的数据分为2个部分：55000份训练数据（mnist.train）和10000份测试数据（mnist.test）。这…
阅读更多...
Doo Prime 德璞资本：初学者必看！期货是怎么交易的四大技能

Doo Prime 德璞资本：初学者必看！期货是怎么交易的四大技能

期货交易是一种金融衍生品交易&#xff0c;是指在未来某个约定的时间和价格上&#xff0c;按照合约规定的标的物进行买卖的交易方式。它是一种非常重要的投资方式&#xff0c;因为它可以帮助投资者在风险管理方面更好地掌握市场。 期货的交易方式非常多样化&#xff0c;尤其是…
阅读更多...
【51单片机】：串口通信控制LED亮灭任务

【51单片机】：串口通信控制LED亮灭任务

学习目标&#xff1a; 使用51单片机的串口通信&#xff0c;当串口通信助手 发送字符串 on led开启 发送字符串 off led关闭 并且串口助手实时返回 发送的字符串 学习内容&#xff08;代码&#xff09;&#xff1a; 第一种方法&#xff0c;使用数组依次判断接收到的字…
阅读更多...
凝聚青年力量，打造数字化人才队伍

凝聚青年力量，打造数字化人才队伍

当代青年人勇于探索、敢于创新、勤于变革&#xff0c;积极承担社会责任。这与ABeam倡导的「Build Beyond As One.™」的品牌理念不谋而合。ABeam的青年员工是未来社会的中坚力量&#xff0c;也正用他们的青春能量助力ABeam在中国的发展。 01 新兴青年力量 对ABeam而言&#…
阅读更多...
走进工厂，认识静电测试仪器——使用方法和注意事项

走进工厂，认识静电测试仪器——使用方法和注意事项

随着科技的不断发展,静电测试仪器越来越多地被人们所使用。但是有些人对静电测试仪的使用方法和注意事项还不是很了解。 1&#xff1a;静电测试仪器的基本知识 静电测试仪器是一种用来测量电源电压、电流和电容器的材料。通常&#xff0c;静电测试仪器由一个电阻器或一组绝缘…
阅读更多...
R语言丨Pheatmap绘制基因表达量热图

R语言丨Pheatmap绘制基因表达量热图

Pheatmap绘制基因表达量热图 论文中展示基因表达量变化通常使用热图&#xff0c;今天分享一个快速绘制不同基因在各处理下表达量变化的方法&#xff0c;使用R语言中pheatmap包&#xff0c;它可以用于可视化数据集中的数值&#xff0c;以便更好地理解数据之间的关系和模式。 …
阅读更多...
STM32单片机WIFI教室灯光控制系统人数自动灯光温度时间

STM32单片机WIFI教室灯光控制系统人数自动灯光温度时间

实践制作DIY- GC0135-WIFI教室灯光控制系统 一、功能说明&#xff1a; 基于STM32单片机设计-WIFI教室灯光控制系统 二、功能介绍&#xff1a; 电路&#xff1a;STM32F103C最小系统板DS18B20温度传感器LCD1602显示器ESP8266WIFI模块4个红外槽型光电传感器3个LED灯多个按键蜂鸣…
阅读更多...
Linux内核模块编程

Linux内核模块编程

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 1 总体设计思路 Linux内核是单体式结构&#xff0c;相对于微内核结构而言&#xff0c;其运行效率高&#xff0c;但是系统的可维护性和可扩展性较差。为此&#xff0c;Linux提供了内核模块&#xff08;module&#xff09;机制&…
阅读更多...
腾讯轻量服务器python3.6升级到python3.9.9

腾讯轻量服务器python3.6升级到python3.9.9

由于不了解linux&#xff0c;要配合宝塔的查看文件&#xff0c;这样轻松很多 用得到的2个基本命令: sudo 管理员方式运行&#xff08;我照着网上方法试几次安装都没成功&#xff0c;就是开头没加这句&#xff09; pwd 显示当前的目录 第1步 下载新python sudo wget https://ww…
阅读更多...
用写代码的方式画图-试下PlantUML吧 | 京东云技术团队

用写代码的方式画图-试下PlantUML吧 | 京东云技术团队

1 序言 所谓一图胜千言&#xff0c;大家平日在工作中编写文档时&#xff0c;往往都需要画各种图来表达中心思想&#xff0c;比如流程图、时序图、UML 图&#xff0c;很多人选择使用 Axure 、PrecessOn、Diagrams&#xff08;darw.io&#xff09;、XMind、Visio、yEd、Lucidcha…
阅读更多...
2023年企业降低云支出的小方法汇总

2023年企业降低云支出的小方法汇总

据悉&#xff0c;2023年全球云基础设施服务支出全年将增长23%&#xff0c;也就是说云支出会持续增长。所以企业有效降低云支出是刻不容缓的。这里就给大家汇总了一些企业降低云支出的小方法&#xff0c;希望有用。 2023年企业降低云支出的小方法汇总 1、寻找价格折扣 提前计…
阅读更多...
计算机图形学 | 实验十一：阴影计算

计算机图形学 | 实验十一：阴影计算

计算机图形学 | 实验十一&#xff1a;阴影计算 计算机图形学 | 实验十一&#xff1a;阴影计算帧缓冲创建一个帧缓冲纹理附件渲染缓冲对象附件总结 阴影映射算法思想深度贴图渲染阴影抗锯齿 assimp库结果 华中科技大学《计算机图形学》课程 MOOC地址&#xff1a;计算机图形学&a…
阅读更多...
分布式ID解决方案（一）数据库号段方式

分布式ID解决方案（一）数据库号段方式

一、前言 在一些简单系统中&#xff0c;我们可以直接使用数据库ID自增方式来标识和保存数据&#xff0c;但是随着系统的逐渐复杂&#xff0c;数据量的日益增多&#xff0c;我们可能需要对数据表、数据库实现分库分表。单纯的使用数据库的ID自增无法满足业务场景了&#xff0c;所…
阅读更多...
Seata 的可观测实践

Seata 的可观测实践

作者&#xff1a;察溯 Seata 简介 Seata 的前身是阿里巴巴集团内大规模使用保证分布式事务一致性的中间件&#xff0c;Seata 是其开源产品&#xff0c;由社区维护。在介绍 Seata 前&#xff0c;先与大家讨论下我们业务发展过程中经常遇到的一些问题场景。 业务场景 我们业务…
阅读更多...
数据规模缩小 200 倍！指令微调高效指导大模型学习

数据规模缩小 200 倍！指令微调高效指导大模型学习

夕小瑶科技说 原创 作者 | 智商掉了一地、Python 最近大型语言模型&#xff08;LLMs&#xff09;的指令微调备受研究人员的关注&#xff0c;因为它可以开发 LLM 遵循指令的潜力&#xff0c;使其更加符合特定的任务需求。虽然指令微调&#xff08;Instruction Tuning&#xff…
阅读更多...
JavaEE-HTTPS的加密流程

JavaEE-HTTPS的加密流程

目录 对称加密非对称加密证书的引入 对称加密 对称加密就是用同一个密钥把明文进行加密变成密文,也能把密文解密为明文. 理想状态下: 引入对称加密之后, 即使数据被截获, 由于黑客不知道密钥是啥, 因此就无法进行解密, 也就不知道请求的真实内容是啥了. 但同一时刻服务器服务…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023