相关配置兼容性属 教程 等参考这个就够了:
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>
效果图:
文字闪烁:
基本都一样, 把background-color 换成 color 就行:
@keyframes aniColor1 {
0% {
color: #f00;
}
50% {
color: #FFC100;
}
100% {
color: #f00;
}
}
效果图: