css - 可通过动画更改并可通过 [attribute=value] 访问的属性

Question

我目前正在尝试制作一个动画来更改可以通过 [attribute=value] 访问的属性，如下所示:

.test {
Animation: someAnimation 5s infinite;
}
@keyframes someAnimation{
    20% {someAttribute: someValue;}
    40% {someAttribute: someValue;}
}
.test[someAttribute=someValue]{
background-color: red;
}

如果有的话，SomeAttribute 会是什么？

注意:我正在通过访问 SomeAttribute

明确寻找要更改的背景颜色

Answer 1

您可以使用属性在 CSS 中定位元素，但您可以更改它们。为此，您需要 javascript。

.test-element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
  width: 100px;
  height: 100px;
}

[data-pickMe="true"] {
  background-color: salmon;
}

<div class="test-element" data-pickMe="true">Test</div>