logo标签列表

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

htmlcsscss-animations
3
我正在尝试创建导航栏菜单，其中文字在悬停时翻转。
这是我迄今为止尝试的代码，并嵌入了视频，展示了我正在努力实现的最终效果。 

<!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 stackoverflow code snippet poster</h3>
        <a href="https://www.youtube.com/embed/WeUfsRce9_M" target="_blank" >Video link</a>
        </section>
    </div>
</body>
</html>

我无法想到一种方法来使文本在鼠标悬停时向上移动并从底部返回到起始位置的动画效果。
尝试移除 infinite 并将速度设置为 3s。 - Adam Jenča
我将其修改为“animation: flip 1s ease;”，但在悬停时出现抖动问题。 - ABHIJITH EA
2个回答
1
你需要使用::after 和 ::before 选择器。请注意，你需要向所有链接添加data-text属性（将链接名称作为值）。 

* {
  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 stackoverflow code snpite poster</h3>
      <a href="https://www.youtube.com/embed/WeUfsRce9_M" target="_blank">Vide link</a>
    </section>
  </div>
</body>

</html>

0

您需要设置动画操作的持续时间。

您必须使用：animation-iteration-count

或者删除无限：

animation: flip 2s ease;

享受吧！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接