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

标签： csscss-selectors

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>