我想实现这个光标交互答案

【问题标题】：I want to achieve this cursor interaction我想实现这个光标交互
【发布时间】：2020-10-20 17:02:31
【问题描述】：

我正在研究这个网站，我想知道他是如何实现这种光标交互的 https://pchico.es/

我想做什么？

自定义光标
这种对追随者的拉伸效果
以及链接或图片上的悬停效果

我不是在寻找图像上的波浪效果

我已经做过/尝试了什么？

我制作了一个自定义光标并让它跟随我的指针
我尝试在悬停链接时更改光标的背景颜色，但没有成功
关于灰色随从的拉伸效果。是的，我没有在网上找到任何东西，我什至不知道要搜索什么

这是我的html

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  transform: translate3d(0, 0, 0);
}

#main {
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 999;
  opacity: 0.1;
}

#follower {
  position: absolute;
  background-color: lightgray;
  opacity: 0.5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 998;
}

a:hover .cursor #main {
  background-color: red;
}

<div class="App">
  <div class="cursor"><span id="main" style="left: 885px; top: 199px; display: none;"></span><span id="follower" style="left: 885px; top: 199px; display: none;"></span></div>
  <header>
    <div class="content">
      <nav>
        <div class="logo"><img src="/static/media/logo.29eeb746.svg" alt=""></div>
        <ul>
          <li><a href="#more">Know More</a></li>
          <span class="separator"></span>
          <li><a href="mailto:contact@Abdelhamied.ml">Contact@Abdelhamied.ml</a></li>
        </ul>
      </nav>
      <div class="welcome">
        <p class="hello">Hello...</p>
        <p>I'm Abdelhamied <br> Mostafa</p>
      </div>
      <div class="foot">
        <p class="job">Full stack web developer</p>
        <p class="status">Self employed</p>
      </div>
    </div>
    <div class="full-pic"><img src="/static/media/side-pic.cdb78a3a.png" alt=""></div>
  </header>
</div>

【问题讨论】：

a:hover .cursor #main 说的是<a><span class="cursor"><span id="main"></span></span></a>
移动光标的代码在哪里？
我可以一秒在github上分享整个react项目

标签： javascript html css reactjs

【解决方案1】：

我打开了 devtools 控制台并研究了他们的代码。我在他们的网站代码中找到了这个脚本链接https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js，我找到了他们使用的库类型。这是网站用来实现这些动画的库的链接：库的link。但并不是所有的动画都使用这个库，其他的都是网站程序员制作的。

【讨论】：