【CSS3动画】简单实现背景闪烁，文字闪烁兼容IE11

迈不过友情╰ 2023-06-16 10:35 17阅读 0赞

相关配置兼容性属 教程 等参考这个就够了：  
https://www.w3school.com.cn/css3/css3\_animation.asp

以下示例测试了chrome / IE11 / 火狐浏览器

--------------------

## 背景闪烁： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            body{padding: 50px;}
            .blink {
                width: 100px;height:100px;
                line-height: 100px;
                font-size:15px;
                background-color:#ff0;
                text-align: center;
                animation:aBlink 300ms infinite;
                -webkit-animation:aBlink 300ms infinite;
            }
    
            @keyframes aBlink {
                from { background-color:#ff0; }
                50%{background-color:#f00;}
                to { background-color:#ff0; }
            }
    
            @-webkit-keyframes aBlink {
                from { background-color:#ff0; }
                50%{background-color:#f00;}
                to { background-color:#ff0; }
            }
    
        </style>
    </head>
    <body>
    
    <div class="blink">背景闪烁</div>
    </body>
    </html>

效果图：  
![在这里插入图片描述][20191113152202707.gif]

--------------------

## 文字闪烁： ##

基本都一样， 把background-color 换成 color 就行：

@keyframes  aniColor1 {
                0% {
                    color: #f00;
                }
                50% {
                    color: #FFC100;
                }
                100% {
                    color: #f00;
                }
            }

效果图：  
![在这里插入图片描述][20191113170828884.gif]

[20191113152202707.gif]: https://img-blog.csdnimg.cn/20191113152202707.gif
[20191113170828884.gif]: https://img-blog.csdnimg.cn/20191113170828884.gif