在鼠标悬停时显示隐藏的内容

Question

如何在此网站上制作此动画：

https://www.beepi.com/

当您将鼠标悬停在蓝色和绿色圆圈上制作动画时，我想对此设计采用相同的方法：

我应该用什么做呢？任何教程，指南，什么？我可以看到并能够在我的网站上实现它。

Answer 1

我试图发挥这种效果。这就是我所做的：DEMO JsFiddle。

function js1(x) {
  x.style.animation = "anime 5s";
}

function js2(x) {
  x.style.animation = "anime1 5s";
}

#first {
  position: absolute;
  float: left;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
#sec {
  position: relative;
  float: right;
  width: 100px;
  height: 100px;
  background-color: black;
  top: 200px
}
@Keyframes anime {
  from {
    left: 0;
  }
  to {
    left: -400px;
  }
}
@Keyframes anime1 {
  from {
    left: 0;
  }
  to {
    left: 400px;
  }
}

<div id="first" onmouseenter="js1(this)"></div>
<div id="sec" onmouseenter="js2(this)"></div>

免费使用代码。现在你必须只用滚动解决问题（页面必须左转 - 我不知道该怎么做但我会尝试）。

我使用 javascript 和 onmouseenter 来创建悬停部分。您可以阅读关于onmouseenter here和@Keyframes here的信息。