CSS3-动画-文字闪烁_css3 文字闪烁


文字闪烁是一种动画，在css中要达到类似的效果，除了使用js设置修改，第一时间想到的就是css中的animation(动画)了。

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

CSS3-动画-文字闪烁_css_02

CSS3动画属性

CSS3-动画-文字闪烁_html_03


那么就用已有的这些知识，做个文字闪烁的功能：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            font-size: 36px;
            font-weight: bold;
            color: red;
            animation: blink 2s linear infinite;
            -webkit-animation: blink 2s linear infinite;
            -moz-animation: blink 2s linear infinite;
            -ms-animation: blink 2s linear infinite;
            -o-animation: blink 2s linear infinite;
        }

        @keyframes blink {
            0% {
                color: red;
            }

            50% {
                color: transparent;
            }

            100% {
                color: red;
            }
        }
    </style>
</head>
<body>
    <p>中国，加油！</p>
</body>
</html>

CSS3-动画-文字闪烁_css3 测试结果