Question

我是HTML和CSS的新手，我一直在玩一些动画。但是锚标签的接缝反应不同：

HTML：

<!DOCTYPE html>

<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body id="home">

<ul id="menu-list">
    <p>text</p>
    <li>text <a class="home" href="#home">Home</a></li>
    <li><a class="about" href="#about">About</a></li>text
    <li><a class="contact" href="#contacts">Contact</a></li>
    <div>text</div>
</ul>

</body></html>

CSS：

@charset "utf-8";

@-webkit-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
   @-moz-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
    @-ms-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
     @-o-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
        @keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}

#menu-list {
    -webkit-animation: redtowhitetext 3s infinite;
       -moz-animation: redtowhitetext 3s infinite;
        -ms-animation: redtowhitetext 3s infinite;
         -o-animation: redtowhitetext 3s infinite;
            animation: redtowhitetext 3s infinite;
}

结果：

p，div或no标签内的文本应该从红色到白色振荡。但锚标签内的文字并不是。为什么锚标记的行为不同？如何让它按照预期响应动画？

如果添加a {color: inherit}，链接也会动画显示。但是，如果您只想定位链接或特定链接 - 将选择器更改为#menu-list a，则只有未访问过的链接才会生成动画：

在提供解决方案时，您能否解释一下这种行为。

Answer 1

a元素默认从浏览器继承其颜色，因此如果添加inherit值，它将从其父级获取其颜色。对于访问过的链接问题，您可以使用:visited。

将color:inherit;添加到a元素。 Jsfiddle

a,
a:visited
{
  color: inherit;
}

@-webkit-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-moz-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-ms-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@-o-keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

@keyframes redtowhitetext {

    0% {

        color: red;

    }

    50% {

        color: white;

    }

    100% {

        color: red;

    }

}

#menu-list {

    -webkit-animation: redtowhitetext 3s infinite;

    -moz-animation: redtowhitetext 3s infinite;

    -ms-animation: redtowhitetext 3s infinite;

    -o-animation: redtowhitetext 3s infinite;

    animation: redtowhitetext 3s infinite;

}

a,
a:visited {

    color:inherit;

<!DOCTYPE html>
<html>
    
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body id="home">
        <ul id="menu-list">
            <p>text</p>
            <li>text <a class="home" href="#home">Home</a>
            </li>
            <li><a class="about" href="#about">About</a>
            </li>text
            <li><a class="contact" href="#contacts">Contact</a>
            </li>
            <div>text</div>
        </ul>
    </body>

</html>

Answer 2

将a标记添加到css。

#menu-list,
#menu-list li a {
-webkit-animation: redtowhitetext 3s infinite;
   -moz-animation: redtowhitetext 3s infinite;
    -ms-animation: redtowhitetext 3s infinite;
     -o-animation: redtowhitetext 3s infinite;
        animation: redtowhitetext 3s infinite;
}

请参阅：http://jsfiddle.net/gchqwnnb/

Answer 3

由于向a:visited添加动画并未动态访问过的链接，在没有更好的解决方案的情况下，感谢alireza safian和M.Matias使用建议，我将建议以下解决方案来设置链接动画：

在链接中添加包装器。为包装器标签设置动画。设置a {color: inherit}。

HTML：

  <!DOCTYPE html>

<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="menu-top.css"/>
</head>

<body id="home">

    <ul id="menu-list">
        <li class="home"><a href="#home">Home</a></li>
        <li class="about"><a href="#about">About</a></li>
        <li class="contact"><a href="#contactss">Contact</a></li>
    </ul>

</body></html>

CSS：

@charset "utf-8";

@-webkit-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
   @-moz-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
    @-ms-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
     @-o-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
        @keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}

.contact, .about {
    -webkit-animation: redtowhitetext 3s infinite;
       -moz-animation: redtowhitetext 3s infinite;
        -ms-animation: redtowhitetext 3s infinite;
         -o-animation: redtowhitetext 3s infinite;
            animation: redtowhitetext 3s infinite;
}

a {color: inherit;}

结果：

为什么CSS动画不像文本那样在链接（锚标签）上工作？

3 个答案: