<!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简单动画实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题 问题演示 //html <div class=first> //less .container { width: 100vw; ...
定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。... @keyframes animationname {keyframes-selector {css
html5小游戏 js使用jq css 使用@keyframes制作动画
jquery绑定 css3 animation-keyframes关键帧动画,,,,,,,
NULL 博文链接：https://onestopweb.iteye.com/blog/2314115
在css3中，我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中，否则不会有效果出现。同时，我们还需定义动画时长和动画名称 语法 CSS Code复制内容到剪贴板 @keyframes ...
最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。 技术重点css3: @...
一个或多个合法的 CSS 样式属性。 定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生...
前端——css学习
motus - 滚动时模仿CSS关键帧(keyframes)的动画库
css参考手册W3School CSS 参考手册 来源： www.w3school.com.cn 整理：飞龙 日期： 2014.10.26 CSS3 动画属性（ Animation ） 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 ...
animation Transform CSS3 、 @keyframes利用C3的动画效果写的一些小的动画效果
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 @keyframes myfirst /* myfirst 为动画名 */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirs
创建CSS3动画 设置@keyframes动画规则 animation应用动画规则 1 @keyframes规则规定动画的变化状态。 两个状态的效果，应用from，to，from动画开始，to动画结束 多个状态的效果，应用百分比形式，0%动画开始，100%...
css3水波纹混合元素动画是一款基于css3 @keyframes属性绘制水波纹背景元素，水滴和波纹结合动画特效。