Question

我现在已经在某些网站上看到了这种趋势，其中默认光标被新光标替换 - 在很多情况下是圈子

这些游标是互动的 - 交互式我的意思是当悬停一个标签时，它会改变大小和颜色。

在这个网站上：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-tags时，它应该环绕a-tag，类似于网站上的示例。如果可能的话使用javascript和css

这怎么可能？

Answer 1

你几乎是好的，只需要使两个元素的行为相同，并通过在小的元素上添加转换，你会使它变慢并创建跟随效果。

＆＃13;

$('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
  });

});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

如果您希望较大的一个跟随小的转换，请更改转换：

＆＃13;

$('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
  });

});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

<强>更新

如果要在悬停链接时更改光标，可以考虑使用链接上的事件标记。

这是一个简单的例子：

＆＃13;

$('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');
})

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

两个圆圈应该跟随光标 - 一个小而一个大（有延迟）

1 个答案: