具有背景顏色的表格單元格上的CSS框陰影影片-有解無憂

我正在嘗試使用框陰影為表格的行設定影片。第一列是固定的并且具有背景顏色屬性。看起來這兩件事弄亂了影片。請參閱下面的代碼段和 JsBin。Stackoverflow 抱怨我的帖子主要是代碼，但我認為 gif 是自我解釋的。

具有背景顏色的表格單元格上的 CSS 框陰影影片

tr.pulse-row {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

body {
  padding: 20px
}

td.is-fixed-left {
  background-color: #f9f9f9;  
  z-index: 3;
  position: sticky;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="is-fixed-left">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="pulse-row">
      <th scope="row">2</th>
      <td class="is-fixed-left">Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="is-fixed-left">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</table>
</body>
</html>

這是JsBin

uj5u.com熱心網友回復：

添加z-index:0到除.pulse-row.

tr {
  position:relative;
  z-index:0;
}

tr.pulse-row {
  animation: pulse 1s infinite;
  z-index:1;
}



@keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

body {
  padding: 20px
}

td.is-fixed-left {
  background-color: #f9f9f9;  
  z-index: 3;
  position: sticky;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td class="is-fixed-left">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr class="pulse-row">
      <th scope="row">2</th>
      <td class="is-fixed-left">Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td class="is-fixed-left">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</table>
</body>
</html>

在評論中集成請求。

我覺得解決不了這個問題，因為上一層下一層，而且背景總是會遮住下面元素的陰影。但是您可以解決這個問題（如果頁面背景是純色并且在這種情況下考慮白色）。

對background-color固定的td.

由此：background-color: #f9f9f9;

對此：background-color: #5c5c5c0f;

這里是 JSFiddle 示例。

uj5u.com熱心網友回復：

當您使用 css 影片時，它將創建另一個用于堆疊的背景關系z-index。

所以你必須position:relative在你的類中添加影片才能z-index正確使用。

tr.pulse-row {
      animation: pulse 1s infinite;
      position:relative;
      z-index:99;
    }
    
    @keyframes pulse {
      0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
      }
      70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
      }
      100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
      }
    }
    
    body {
      padding: 20px
    }
    
    td.is-fixed-left {
      background-color: #f9f9f9;  
      z-index: 3;
      position: sticky;
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440957.html

標籤：css 动画

上一篇：Framer運動新影片并退出不適用于映射

下一篇：回呼也適用于第一個影片結束元素