光标后面应该有两个圆圈——一个小圆圈和一个大圆圈(有延迟)

Question

我现在在一些网站上看到了这种趋势，默认光标被替换为新光标 - 在许多情况下是圆圈

这些光标是交互式的——交互式是指当悬停在 a 标签上时，它会改变大小和颜色。

在这个网站上：https://en.leviev-group.com/你可以看到我想要的光标的效果。

我尝试制作一支笔，但它无法正常工作：https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens

<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>

我希望中间的圆圈是光标，周围的大圆圈延迟跟随光标。当悬停在 a 标签上时，它应该环绕 a 标签，类似于网站上的示例。如果可能的话，用javascript和css制作

这怎么可能？

Answer 1

你几乎很好，只需让两个元素的行为相同，通过在小元素上添加过渡，您将使其变慢并创建跟随效果。

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});
$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });
});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}
#circle {
  display: block;
  position: absolute;
  margin: auto;
  transition: all 1s linear;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}
a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>
<a>link</a>

或者，如果您希望较大的过渡跟随较小的过渡，请更改过渡：

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});
$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });
});

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}
#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  z-index: -1;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}
a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>
<a>link</a>

更新

如果要在

悬停链接时更改光标，则可以考虑链接标记上的事件。

下面是一个简单的示例：

$('body').mouseover(function() {
  $(this).css({
    cursor: 'none'
  });
});
$(document).on('mousemove', function(e) {
  $('#circle-big').css({
    left: e.pageX,
    top: e.pageY
  });
  $('#circle').css({
    left: e.pageX,
    top: e.pageY
  });
});
$('a').mouseover(function() {
  $('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
  $('#cursor').removeClass('on-link');
})

#circle-big {
  display: block;
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
  transition: all 1s linear;
  width: 60px;
  height: 60px;
  z-index: -1;
  text-align: center;
  border: 2px solid red;
  border-radius: 50%;
}
#circle {
  display: block;
  position: absolute;
  margin: auto;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  margin-left: -7.5px;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
  border: 2px solid blue;
}
a {
  font-size: 26px;
  text-align: center;
  margin: 100px auto;
  display: block;
}
a:hover {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
  <div id="circle-big"></div>
  <div id="circle"></div>
</div>
<a>link</a>