动画的CSS：

  1. // fire
  2. @keyframes fireDiv {
  3.   0% {
  4.     text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  5.       -2px -15px 11px #f80, 2px -25px 18px #f20;
  6.   }
  7.   25% {
  8.     text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  9.       -3px -20px 11px #f80, 4px -30px 22px #f20;
  10.   }
  11.   50% {
  12.     text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,
  13.       -4px -25px 11px #f80, 4px -35px 25px #f20;
  14.   }
  15.   75% {
  16.     text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  17.       -3px -20px 11px #f80, 4px -30px 22px #f20;
  18.   }
  19.   100% {
  20.     text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  21.       -2px -15px 11px #f80, 2px -25px 18px #f20;
  22.   }
  23. }

All code:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7.     <title>fire</title>
  8.     <style>
  9.       .zhengshize {
  10.         font-size: 80px;
  11.         text-align: center;
  12.         font-family: "微软雅黑";
  13.         font-weight: bold;
  14.         color: #000;
  15.         margin-top: 50px;
  16.         animation: fireDiv 1s infinite;
  17.       }
  18.       @keyframes fireDiv {
  19.         0% {
  20.           text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  21.             -2px -15px 11px #f80, 2px -25px 18px #f20;
  22.         }
  23.         25% {
  24.           text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  25.             -3px -20px 11px #f80, 4px -30px 22px #f20;
  26.         }
  27.         50% {
  28.           text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,
  29.             -4px -25px 11px #f80, 4px -35px 25px #f20;
  30.         }
  31.         75% {
  32.           text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,
  33.             -3px -20px 11px #f80, 4px -30px 22px #f20;
  34.         }
  35.         100% {
  36.           text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,
  37.             -2px -15px 11px #f80, 2px -25px 18px #f20;
  38.         }
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <div class="zhengshize">zhengshize</div>
  44.   </body>
  45. </html>

CSS3字体火焰燃烧效果的更多相关文章

  1. CSS3文字描边 CSS3字体外部描边

    给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...

  2. CSS3 字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...

  3. 收集的可以下载css3字体图标的网站

    http://icomoon.io/app/ 可以选择跟简单调整图标打包成css3 字体下载, http://www.flaticon.com/categories/weapons

  4. css3 字体、2D转换、3D转换

    学习篇之CSS3 字体.2D转换.3D转换 一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. ...

  5. CSS3字体模块

    介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...

  6. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  7. CSS3字体大小rem属性用法

    PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较精确和固定. 只要页面某元素设置了px字体大小,其子元素/子孙元素未设置字体大小或设置的字体大小css优先级没父元素 ...

  8. CSS3字体图标

    网址:http://icomoon.io/http://iconfont.cn/  阿里巴巴字体库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. css3字体

    1.定义个性化字体 @font-face{ font-family:字体名字; src:字体地址,可以多写几个用逗号隔开兼容浏览器 } div{ font-family:字体名字/*使用字体*/ } ...

随机推荐

  1. Asp.net的生命周期之页生命周期

    参考:http://msdn.microsoft.com/zh-cn/library/ms178472%28v=vs.100%29.aspx http://msdn.microsoft.com/zh- ...

  2. laravel框架图片上传

    1.建控制器方法 2.建立路由 绑定控制器方法 3.进行图片上传的配置 修改图片上传的路径 a) config/filesystems.php 修改disks->local->root(图 ...

  3. flask _bootstrap中使用flash

    在模板中获取flash闪现的那段代码要和内容块放在同一级别上.不然网页上是看不到闪现的内容的. 比如在基模板里定义一个content block ,里面一个是get_flashed_messages代 ...

  4. 平衡树 替罪羊树（Scapegoat Tree）

    替罪羊树(Scapegoat Tree) 入门模板题 洛谷oj P3369 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入xx数 删除xx数(若有多个相同 ...

  5. mssql 注入

    注入查阅 .返回的是连接的数据库名 .作用是获取连接用户名 .将数据库备份到Web目录下面 ;backup database 数据库名 to disk='c:\inetpub\wwwroot\1.db ...

  6. 发布aar到jcenter

    准备工作 创建bintray账号; 在https://bintray.com/, 选择如下图中,方框内"Sign Up Here": 选择合适的方式,创建账号: 新建仓库: Add ...

  7. 阅读The Java® Language Specification需要知道的术语

    Null Pointer Exception,简称NPE 在java中,static final修饰的是常量.根据编译器的不同行为,常量又可分为编译时常量和运行时常量. 举例说明吧 public st ...

  8. select2 使用教程

    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...

  9. hibernate与ibatis的区别

    Hibernate 是当前最流行的O/R mapping框架,当前版本是3.05.它出身于sf.net,现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架,当前 ...

  10. 令狐冲和TCP/IP协议的第三层协议的关系(经典)

    今天突然想起来去看了看我以前在csdn的博客,发现一篇以前一直被奉为经典的文章,哈哈,再转过来和大家看看:              令狐冲十四岁那年进入华山,那年岳琳珊八岁,岳不群白天给两人指点剑法 ...