文字闪烁是一种动画,在css中要达到类似的效果,除了使用js设置修改,第一时间想到的就是css中的animation(动画)了。
## CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
## CSS3 @keyframes 规则
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
## 浏览器支持
## CSS3动画属性
那么就用已有的这些知识,做个文字闪烁的功能:
代码示例:
```
<!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>
```