html - 悬停 div 时显示隐藏内容

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 .