CSS 动画出现在顶部，而 运行

Question

我正在制作 2 只眨眼的动画。但是当我滚动页面时，它们会出现在我的导航栏顶部。没有动画就不会这样做。如何在导航栏下方制作动画运行？一些帖子提到了 z-index 但我似乎无法让它发挥作用。 我在这里复制了这个问题：Vue SFC Playground

Answer 1

我已将您的代码编辑如下：

<script setup>

</script>

<template>
<div class="nav">
  navigation bar
</div>
<div class="face">
<div class="eyes">
   <div></div>
   <div></div>
</div>
</div>
<div class="content">
  
  </div>
</template>

<style>
 @keyframes blink {
    0% {transform: scaleY(0.1) scaleX(1.4);}
    5% {transform: scaleY(1) scaleX(1);}
    10% {transform: scaleY(0.1) scaleX(1.4);}
    15% {transform: scaleY(1) scaleX(1);}
  }
  .face {
    height: 100px;
    background-color: black;
    padding: 20px;
    margin: 50px 100px;
  }
  .eyes {
    display: flex;
    flex-direction: row;
    margin: 0 100px;
    justify-content: space-between;
    
  }
  .eyes div {
    width: 15px;
    height: 20px;
    background-color: white;
    border-radius: 5px;
    animation: blink 3s linear 0.0001s infinite;
  }
  .nav{
    background-color: pink;
    padding: 10px;
    position: fixed;
    top: 0;
     left: 0;
     right: 0;
    z-index: 100;
  }
  .content {
    height: 1000px
  }
</style>

在这里，我添加了一个 z-index: 100 以便导航栏始终保持在顶部。