我的页面有一个CSS动画，逐渐改变身体颜色。在页面上有多个链接，但我只希望其中一个链接作为动画的刷新按钮。
我做了一个小提琴来说明这个概念。我确信这是一个相对简单的修复，正确地分配class或ID标记，但我被困住了。提前谢谢！
null
a {
color:white;
}
/*Animation Prefs*/
@-webkit-keyframes pulse {
0% {background-color: #09765a;}
100% {background-color: #000;}
}
@-moz-keyframes pulse_m {
0% {background-color: #09765a;}
100% {background-color: #000;}
}
body {
-webkit-animation: pulse 5s linear;
-moz-animation: pulse_m 5s linear;
background-color: #000;
}
/*Animation Prefs 2*/
@-webkit-keyframes pulse2 {
0% {background-color: #09765a;}
100% {background-color: #000;}
}
@-moz-keyframes pulse_m2 {
0% {background-color: #09765a;}
100% {background-color: #000;}
}
body:active {
-webkit-animation: pulse2 5s linear;
-moz-animation: pulse_m2 5s linear;
background-color: #000;
}<a href="#" rel="home_page">This link should refresh animation</a>
<br><br><br>
<a href="#" rel="home_page">This link should not</a>null
https://jsfiddle.net/ykrtajep/
在相关链接上使用伪元素:
null
a {
color: white;
}
#flash::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -99;
animation: pulse 5s linear;
background-color: #000;
pointer-events:none;
}
#flash:active::before {
animation-name:pulse2;
}
@keyframes pulse {
0% {
background-color: #09765a;
}
}
@keyframes pulse2 {
0% {
background-color: #09765a;
}
}<a href="#" id="flash" rel="home_page">This link should refresh animation</a>
<br><br><br>
<a href="#" rel="home_page">This link should not</a>