无法使用 css 动画垂直翻转导航栏菜单文本

Question

我正在尝试创建悬停时文本会翻转的导航栏菜单。

这是我到目前为止尝试的代码，并嵌入了显示我试图实现的最终结果的视频。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            vertical-align: baseline;
            background: transparent;
            font-weight: normal;
            text-decoration: none;
            outline: none;
            box-sizing: border-box;
        }
        .wrapper {
            width: 90%;
            margin: 0 auto;
            max-width:1100px;
        }
        header {
            height: 100px;
            padding: 20px 0;
        }
        header nav {}
        header nav ul {
            list-style: none;
            display: flex;
            justify-content: space-between;
        }
        header nav ul li {
            font-size: 23px;
            position: relative;
        }
        header nav ul li a {
            position: absolute;
        }
        header nav ul li a:hover {
            animation: flip 2s ease infinite;
        }
        div.video iframe {
            margin-top: 30px;
        }
        @keyframes flip {
            0% {
                top: 0;
            }
            25% {
                top: -50px;
            }
            50% {
                top: -100px;
            }
            75% {
                top: -150px;
            }
            100% {
                top: 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <section class="wrapper">
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Project</a></li>
                    <li><a href="#">Resume</a></li>
                </ul>
            </section>
        </nav>
    </header>
    <div class="video">
        <section class="wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/WeUfsRce9_M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <h3>Video link is given if iframe is note suported by Whosebug code snippet poster</h3>
        <a href="https://www.youtube.com/embed/WeUfsRce9_M" target="_blank" >Video link</a>
        </section>
    </div>
</body>
</html>

我想不出一种方法来为当我们悬停时向上移动的文本设置动画并且 return 从底部到起始位置。

Answer 1

您需要设置动画运行的时长。

您必须使用：animation-iteration-count

或删除无限：

animation: flip 2s ease;

尽情享受吧！

Answer 2

为此您需要使用 ::after 和 ::before 选择器。请注意，您需要为所有 link 添加 data-text 属性（以 link 的名称作为值）。

* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1100px;
}

header {
  height: 100px;
  padding: 20px 0;
}

header nav {}

header nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}

header nav ul li {
  font-size: 23px;
  position: relative;
}

header nav ul li a {
  position: absolute;
  height: 1.3em;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header nav ul li a::after {
  content: attr(data-text);
  color: red;
  transition: transform 0.3s;
}

header nav ul li a::before {
  content: attr(data-text);
  color: blue;
  transition: transform 0.3s;
}

header nav ul li a:hover::before {
  transform: translateY(-1.15em);
}

header nav ul li a:hover::after {
  transform: translateY(-1.15em);
}

div.video iframe {
  margin-top: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <header>
    <nav>
      <section class="wrapper">
        <ul>
          <li>
            <a data-text="About" href=""></a>
          </li>
          <li>
            <a data-text="Project" href=""></a>
          </li>
          <li>
            <a data-text="Resume" href=""></a>
          </li>
        </ul>
      </section>
    </nav>
  </header>
  <div class="video">
    <section class="wrapper">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/WeUfsRce9_M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <h3>Video link is given if iframe is note suported by Whosebug code snpite poster</h3>
      <a href="https://www.youtube.com/embed/WeUfsRce9_M" target="_blank">Vide link</a>
    </section>
  </div>
</body>

</html>

无法使用 css 动画垂直翻转导航栏菜单文本

Can't flip the navbar menu text vertically using css animation

html

css

css-animations