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

【问题标题】：Border animation of a scrolling mouse built with css and javascript使用 css 和 javascript 构建的滚动鼠标的边框动画
【发布时间】：2021-01-25 14:04:03
【问题描述】：

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

【问题讨论】：

忘了说上面的代码改编自josefzacek.com/blog/…。
这能回答你的问题吗？ How to make a smooth dashed border rotation animation like 'marching ants'
turn white with a spinning effect 这里自旋是什么意思
你可以把transform: rotateY(180deg); 加到.moving-mouse-holder:hover .mouse 上，你会得到你想要的
@Harkal - 想象一下在鼠标边框上运行一个白色标记以将其涂成白色。这就是我所说的旋转效果 - 白色标记围绕边界旋转。当悬停停止时，我想让鼠标边框表现得好像你在边框周围运行了一个灰色标记。感谢您的建议，但是 RotateY(180deg) 并没有达到这个效果。

标签： javascript html css css-animations

【解决方案1】：

@Valerij，@Harkal，感谢您为我指明正确的方向。根据您的建议，我发现以下资源非常有用 - https://css-tricks.com/svg-line-animation-works/。第 8 项中显示的动画是我想要实现的动画，但针对的是鼠标边框形状。我将使用 SVG 重新编码鼠标滚动动画，然后使用本资源中描述的结构来为边框设置动画。再次感谢！

【讨论】：