我正在构建一个简单的文本动画。动画应该是一段可以改变颜色的可点击文本。但是,在 Microsoft Edge 上,当链接已被访问时,动画将保持紫色/蓝色,没有任何样式。
我应该在我的代码中实现什么才能使动画在 Edge 上可点击? 不过,它适用于 Google Chrome 和 Firefox。
请注意,发生这种情况时会访问该链接
div.coupon {
height: 30%;
width: 40%;
background-color: teal;
border-radius: 3px;
margin-left: 3%;
padding: 0% 2%;
}
.animation {
-webkit-animation-name: animation;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-name: animation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@-webkit-keyframes animation {
0% {color: blue;}
33% {color: green;}
67% {color: red;}
100% {color: blue;}
}
@keyframes animation {
0% {color: blue;}
33% {color: green;}
67% {color: red;}
100% {color: blue;}
}
a.signup {
text-decoration: none;
}
<div class="coupon">
<a href="signup.html" class="signup"><p class="animation">Click on this link to get yourself a free drink on us!</p></a>
</div>
最佳答案
我认为您只需重写 CSS。 对于动画,您应该使用特定的 CSS 选择器。
.signup:visited .animation {
-webkit-animation-name: animation;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-name: animation;
animation-duration: 3s;
animation-iteration-count: infinite;
}
关于html - 如何使链接颜色不覆盖动画文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46665679/