Question

我正在尝试为这个小提琴后的表格行添加一个闪耀效果：http://jsfiddle.net/nqQc7/511/

.gold:after {
  animation: shine 1.5s infinite linear alternate;
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);

  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.13) 77%,
    rgba(255, 255, 255, 0.5) 92%,
    rgba(255, 255, 255, 0.0) 100%
  );
}

.gold:active:after {
  opacity: 0;
}

@keyframes shine{
  to {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
}

但我似乎无法做到正确，效果溢出桌面：https://jsfiddle.net/uokvjaxx/2/

我将类添加到一个表行中，效果贯穿整个表：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr class="gold">
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

有没有办法将效果限制在只有表格行而不会影响行的显示方式？

Answer 1

也许这样的事情会让你更接近你想要的地方。根据需要自定义，如果您需要支持不同的浏览器，请不要忘记供应商前缀。

＆＃13;

.gold {
	background: linear-gradient(-45deg, #fff087, #eccf02, #fff087);
	background-size: 50% 100%;
	animation: linear-gradient 10s linear infinite;
}

@keyframes linear-gradient {
	0% {
		background-position: 0% 50%
	}

	100% {
		background-position: 400% 400%
	}
}

＆＃13;

<table style="width:100%">
	<tr>
		<th>Firstname</th>
		<th>Lastname</th> 
		<th>Age</th>
	</tr>
	<tr class="gold">
		<td>Jill</td>
		<td>Smith</td> 
		<td>50</td>
	</tr>
	<tr>
		<td>Eve</td>
		<td>Jackson</td> 
		<td>94</td>
	</tr>
</table>

＆＃13;

将闪光效果添加到表格行

1 个答案: