css 字符闪烁,CSS3-动画-文字闪烁

文字闪烁

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

CSS3 动画

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

CSS3 @keyframes 规则

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

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

浏览器支持

CSS3动画属性

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

代码示例：

Document

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;

}

}

中国，加油！

测试结果