如何实现这种悬停效果？

Question

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

可以用CSS动画来完成吗？还是有JavaScript参与？

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

谢谢！

Answer 1

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

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

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

他们给出了 upper 文本

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

它的作用是平滑地重新排列文本，并隐藏底部的文本。

编辑：

CSS 是这样 link 编辑的：

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

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

Answer 2

可以用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);
}

Answer 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>

如何实现这种悬停效果？

How to achieve this hover effect?

css

hover

mousehover