<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5 CSS3 @keyframes 文字一闪一闪提示</title>
</head>
<body>
<style type="text/css">
p{
width:210px;
height:30px;
line-height:30px;
color:#ff5050;
text-align:center;
margin:40px auto;
}
/**
* 下面是 @keyframes 的使用方式
* -webkit-animation:playBox 的 playBox 是调用该函数
* @-webkit-keyframes playBox 的 playBox 是函数的名称
* */
.box{
-webkit-animation:playBox 1.0s infinite;
}
@-webkit-keyframes playBox{
0%{text-decoration:none; background:#ffdcdc;}
50%{text-decoration:none; background:#ffdcdc;}
51%{text-decoration:underline; background:#e9c8c8;}
100%{text-decoration:underline; background:#e9c8c8;}
}
</style>
<p class="box">阅谁问君诵，水落清香浮。</p>
</body>
</html>
效果图：
可以参考一下这条链接，知道更多关于@keyframes的用法
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html
相关推荐
CSS3 @keyframes规则是CSS3中新增的一项功能，允许设计师和开发者通过在动画序列中定义关键帧（keyframes）来创建复杂的动画效果。这个功能的引入极大地丰富了网页设计的表现力和用户体验。要实现一个简单的CSS3动画...
`@font-face`是CSS3中的一个关键特性，它允许开发者在网页中使用非系统自带的字体，即在线加载和显示自定义字体。这打破了以往只能依赖用户计算机已安装字体的限制，为网页设计提供了更多的自由度。 #### 使用步骤...
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示 //html <div class=first> //less .container { width: 100vw; ...
定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。... @keyframes animationname {keyframes-selector {css
其中，@keyframes 规则是 CSS3 中创建动画的关键组件。在本文中，我们将详细介绍 animation 的概念、@keyframes 的语法格式和应用场景。 一、动画的概念 动画是一种通过逐帧拍摄对象并连续播放而形成运动的影像...
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作...
井字棋 HTML小游戏是利用HTML5、JavaScript（jQuery库）以及CSS3的`@keyframes`规则来创建的一款简单互动的在线游戏。这个游戏通常被称为"井字过三关"或"三子连珠"，玩家通过交替在3x3的棋盘上放置"X"和"O"，目标是...
最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。 技术重点css3: @...
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称 语法 CSS Code复制内容到剪贴板 @keyframes ...
一个或多个合法的 CSS 样式属性。 定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生...
在本文中，我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，...
**纯CSS3炫酷文字动画特效详解** 在现代网页设计中，动态效果是吸引用户注意力、提升用户体验的重要手段。CSS3作为CSS的最新版本，引入了许多新的特性和功能，其中包括强大的动画和过渡效果。本教程将详细介绍如何...
CSS动画的关键帧`@keyframes`是创建复杂动画的核心工具，允许开发者精确控制元素在动画过程中的每一帧状态。本文将深入解析`keyframes`的工作原理和使用方法，通过实例来展示其功能。 首先，`@keyframes`定义了一个...
本篇将详细讲解如何使用CSS3来创建一款彩色3D文字上下漂浮的动画特效，这种特效可以为网站增添活力，同时对中文的支持也让其在多语言环境中更具实用性。 首先，我们要了解CSS3中的关键帧动画（@keyframes）是实现...
在这段CSS代码中，`@keyframes fadeEffect`定义了一个名为`fadeEffect`的动画，它在0%时将文字的透明度（opacity）设置为0（完全透明），在50%时设置为1（完全不透明），在100%时再次变为0。`animation`属性将这个...
在本文中，我们将深入探讨如何使用CSS3的`animation`属性来创建一个旋转的文字动画切换效果。CSS3作为现代网页设计的重要工具，提供了丰富的动画功能，让我们能够无需JavaScript即可实现动态视觉效果。以下是对这个...