Ich versuche herauszufinden, wie der Hover-Effekt auf Links (im Abschnitt WORK) auf dieser Website erzielt wird: http: // weaintplastic.com/

Kann es mit CSS-Animationen gemacht werden? Oder ist JavaScript beteiligt?

Ich habe versucht, den CSS-Übergang zu verwenden, aber ich kann nicht beide Elemente gleichzeitig verschieben.

Vielen Dank!

1
Eleana Tyradelli 24 Feb. 2020 im 02:08

3 Antworten

Beste Antwort

Dies kann mit CSS: Hover Selector erfolgen.

Was sie hier tun, ist, dass sie den unteren Text geben

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

Und sie geben den oberen Text

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

Dadurch wird der Text reibungslos neu angeordnet und der untere Text ausgeblendet.

Bearbeiten:

Das CSS ist wie folgt verknüpft:

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

Auf diese Weise werden beim Bewegen des Mauszeigers über .project-link gleichzeitig der untere und der obere Text animiert.

0
Mahatmasamatman 23 Feb. 2020 im 23:23

Dies kann nur mit CSS-Animation erfolgen. Ich habe ein Beispiel gemacht:

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>
0
ali6p 23 Feb. 2020 im 23:33

Dies kann mit CSS erfolgen:

.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);
}
1
Allen Jing 23 Feb. 2020 im 23:29