如何实现这种悬停效果？答案

【问题标题】：How to achieve this hover effect?如何实现这种悬停效果？
【发布时间】：2020-02-24 07:43:26
【问题描述】：

我试图弄清楚如何在此网站上实现链接（在工作部分）上的悬停效果：http://weaintplastic.com/

可以用 CSS 动画来完成吗？还是涉及到 JavaScript？

我尝试使用 CSS 过渡，但无法让两个元素同时移动。

谢谢！

【问题讨论】：

你试过什么？你能发布你的代码吗？

标签： css hover mousehover

【解决方案1】：

可以用 CSS 来完成：

.project-nav .project-link:hover .link__headline {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}

.project-nav .project-link:hover .link__subline {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

【讨论】：

谢谢，我明白了！

【解决方案2】：

可以通过 CSS :hover 选择器来完成。

他们在这里所做的是他们给出了底部文本

opacity: 0;
transform: translateY(-10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

他们给出了上部文本

transform: translateY(10px);
transition: .25s cubic-bezier(.165,.84,.44,1);

这样做是平滑地重新排列文本，并隐藏底部的文本。

编辑：

CSS 是这样链接的：

.project-link:hover .link__headline
.project-link:hover .link__subline

这样，当 .project-link 悬停时，底部和上部文本同时动画。

【讨论】：

是的！链接部分是我无法弄清楚的。谢谢！ :)

【解决方案3】：

只能使用 CSS 动画来完成。我举了个例子：

body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}

a.animation-link {
  letter-spacing: .1em;
  font-weight: bold;
}

.animation-link .link__headline,
.animation-link .link__subline {
  -webkit-transition: .25s cubic-bezier(.165, .84, .44, 1);
  -webkit-transform: translateY(0);
}

.animation-link .link__headline {
  display: block;
  font-size: 1.25em;
}

.animation-link:hover .link__headline {
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
}

.animation-link .link__subline {
  display: inline-block;
  margin: 0;
  background-color: transparent;
  transition: .25s cubic-bezier(.165, .84, .44, 1);
  -ms-transform: translateY(0);
  transform: translateY(0);
  min-width: 0;
  opacity: 1;
  color: green;
}

.animation-link:hover .link__subline {
  opacity: 0;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
</head>

<body>
  <a class="animation-link" href="#">
    <span class="link__headline">Pulp Fiction Movie</span>
    <h6 class="link__subline">by Quentin Tarantino</h6>
  </a>
</body>

</html>

【讨论】：

谢谢！我不知道如何正确组合选择器。这是完美的。