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以便導航欄始終保持在頂部。