Question

我设法使用div制作了一个自定义光标。一切都适用于chrome和firefox，但不适用于Safari。我正在使用transition来达到效果。

在Safari中，它们似乎不会同时更新（left的过渡完成后，top开始）

  function muisupdate(e) {
    if ($(window).width() > 991) {
      if (!e) var e = window.event;
      var mousex = e.pageX - 50;
      var mousey = e.pageY - $(window).scrollTop() - 50;
      $('.cursor').css({
        'top': mousey + 'px',
        'left': mousex + 'px'
      });
      $('body').css('cursor', 'none');
    }
  }

  $(window).mousemove(function(e) {
    muisupdate(e);
  });

.cursor {
  position: fixed;
  transform-origin: 50% 50%;
  width: 100px;
  height: 100px;
  /*border-radius: 100%;
    background:red;*/
  z-index: 99999;
  -webkit-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  -moz-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  -o-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
  transition: 0.5s cubic-bezier(.075, .82, .165, 1);
  transition-property: left, top;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0s;
  mix-blend-mode: difference;
  pointer-events: none;
}

path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  --length: 24;
  --offset: -38;
  stroke-dasharray: var(--length) var(--total-length);
  stroke-dashoffset: var(--offset);
  -webkit-transition: all .8s cubic-bezier(.645, .045, .355, 1);
  transition: all .8s cubic-bezier(.645, .045, .355, 1);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

body {
  cursor: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor">
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="5.15"></circle>
  </svg>
</div>

工作实例：Codepen

有人知道如何使其平滑吗？

编辑，我已将right中的transition更改为top，但这不能解决问题

Answer 1

您应该在CSS转换属性中将right更改为top：

-webkit-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
-moz-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
-o-transition: left right 0.5s cubic-bezier(.075, .82, .165, 1);
transition: 0.5s cubic-bezier(.075, .82, .165, 1);
transition-property: left, right;

->

-webkit-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
-moz-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
-o-transition: left top 0.5s cubic-bezier(.075, .82, .165, 1);
transition: 0.5s cubic-bezier(.075, .82, .165, 1);
transition-property: left, top;

因为您从不使用right属性，而是使用top，过渡不使用此属性。而且在Safari中，它的运行速度要快一些，而在Chrome中，它似乎已经过渡了（如果不是）

Safari顶部，左侧过渡问题

1 个答案: