尝试使用CSS动画超链接

cvxl0en2 于 2023-07-01 发布在其他

关注(0)|答案(2)|浏览(105)

我尝试将动画animation应用于.about_us_right的div wpb_wrapper的第三个<h4>中包含的超链接。

.about_us_list_right .wpb_wrapper h4:nth-child(3) a  {
    -webkit-animation: animation 3s ease-out !important;
    -webkit-animation-iteration-count: infinite !important; 
}
@-webkit-keyframes animation {
    0% { 
        color: red !important;
    }
    50% { 
        color: green !important;
    }
    100% { 
        color: red !important;
    }
}

有人能看到这里有什么不好吗？是否不允许将动画应用于超链接？
我已经将这些代码行应用于不同的div，但以前从未应用于超链接！

css

来源：https://stackoverflow.com/questions/76552619/trying-to-animate-a-hyperlink-using-css

2条答案

按热度按时间

olmpazwi1#

你的哪点不好？基本上和下面一样吗？
我去掉了所有的“！“重要的是，它把它弄得乱七八糟。锚点<a>标签实际上是在H4内，正确吗？我就是这么做的
我假设“div wpb_wrapper of .about_us_right”是指.web_wrapper在about_us_right内部。

@-webkit-keyframes animation {
    0% {
      
        color: red;
    }
    50% {
      
        color: green;
    }
    100% {
      
        color: red;
    }
}

.about_us_list_right .wpb_wrapper h4:nth-child(3) a  {
    -webkit-animation: animation 3s ease-out;
    -webkit-animation-iteration-count: infinite;
}

<div class="about_us_list_right">

<div class = "wpb_wrapper">
<h4>First H4</h4>
<h4>Second H4</h4>
<h4><a href="the link">Third H4</a></h4>
</div>

</div>

赞(0）回复(0）举报 2023-07-01

9avjhtql2#

正如Bman 70所说，你不能使用重要的内部关键帧：
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes