使用css和javascript构建的滚动鼠标的边框动画

Question

我用HTML、CSS和Javascript构建了一个滚动鼠标。Javascript就是让鼠标点击这个滚动的鼠标，把你带到同一页上的“介绍”部分。其余部分由CSS和HTML处理。

我需要帮助这个滚动鼠标的边界动画。当前，当您将鼠标悬停在滚动鼠标上时，边框和鼠标按钮将从默认的灰色变为白色。我想让这个滚动鼠标的边框变成白色，具有旋转效果，而不是当我将鼠标悬停在滚动鼠标上时一下子全部变白。同样，当我不再将鼠标悬停在滚动的鼠标上时，它应该会变回灰色并具有旋转效果。这种带有边框动画的滚动鼠标是ThemeNectar的Nectar Slider上的默认向下指示器。我正在尝试在没有Nectar Slider的情况下复制这种效果。有没有人能提供这个效果的示例代码？

另外，你能帮我让下面的代码浏览器独立吗？目前，我已经在Safari上测试过了，它工作正常。

这是我的滚动鼠标代码。

​

document.getElementById("mouse1").onclick = function(){
     myScrollingMouseClickFunction();
};
function myScrollingMouseClickFunction(){
    // document.getElementById("intro").scrollIntoView({behavior: 'smooth'});
    console.log("will scroll to smoothly to intro")
}

body {
  background: #2d2d2d;
}

.moving-mouse-holder {
  margin: auto;
  margin-top: 60px;
  width: 42px;
  cursor: pointer;
}

.moving-mouse-holder .mouse {
  width: 32px;
  height: 50px;
  position: relative;
  right: 0;
  border-radius: 18px;
  border: 2px solid #aaaaaa;
  transition: border 500ms ease-out;
  animation: mouse-scroll 1500ms infinite ease alternate;
}

.moving-mouse-holder .mouse-button {
  background-color: #aaaaaa;
  width: 4px;
  height: 10px;
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  margin: 0 0 0 -2px;
  animation: mouse-button-scroll 3s infinite ease ;
}

.moving-mouse-holder:hover .mouse       { border: 3px solid #ffffff; }
.moving-mouse-holder:hover .mouse-button{ background-color: #ffffff; }

@keyframes mouse-scroll {
  to {
    transform: translate(0, 10px);
  }
}
@keyframes mouse-button-scroll {
  from {opacity: 1;}
  to {transform: translate(0, 18px) scale(1, 0.8); opacity: 0.1;}
}

<div id="mouse1" class="moving-mouse-holder">
  <div id="mouse2" class="mouse">
    <div id="mouse3" class="mouse-button">&nbsp; </div>
  </div>
</div>

​

Answer 1

@Valerij，@Harkal，感谢您为我指明了正确的方向。根据您的建议，我找到了以下非常有用的资源- https://css-tricks.com/svg-line-animation-works/。项目8中显示的动画是我想要实现的动画，但它是一个鼠标边框形状。我将使用SVG对滚动的鼠标动画进行重新编码，然后使用本参考资料中描述的构造来制作边界动画。再次感谢！