动画的CSS：

// fire

@keyframes fireDiv {

  0% {

    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,

      -2px -15px 11px #f80, 2px -25px 18px #f20;

  }

  25% {

    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,

      -3px -20px 11px #f80, 4px -30px 22px #f20;

  }

  50% {

    text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,

      -4px -25px 11px #f80, 4px -35px 25px #f20;

  }

  75% {

    text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,

      -3px -20px 11px #f80, 4px -30px 22px #f20;

  }

  100% {

    text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,

      -2px -15px 11px #f80, 2px -25px 18px #f20;

  }

}

All code:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>fire</title>

    <style>

      .zhengshize {

        font-size: 80px;

        text-align: center;

        font-family: "微软雅黑";

        font-weight: bold;

        color: #000;

        margin-top: 50px;

        animation: fireDiv 1s infinite;

      }

      @keyframes fireDiv {

        0% {

          text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,

            -2px -15px 11px #f80, 2px -25px 18px #f20;

        }

        25% {

          text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,

            -3px -20px 11px #f80, 4px -30px 22px #f20;

        }

        50% {

          text-shadow: 0 0 4px white, 2px -10px 8px #ff3, 2px -14px 10px #fd3,

            -4px -25px 11px #f80, 4px -35px 25px #f20;

        }

        75% {

          text-shadow: 0 0 4px white, 2px -7px 6px #ff3, 2px -12px 8px #fd3,

            -3px -20px 11px #f80, 4px -30px 22px #f20;

        }

        100% {

          text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3,

            -2px -15px 11px #f80, 2px -25px 18px #f20;

        }

      }

    </style>

  </head>

  <body>

    <div class="zhengshize">zhengshize</div>

  </body>

</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. 2016级算法第六次上机-C.AlvinZH的学霸养成记II

    1032 AlvinZH的学霸养成记II 思路 中等题,贪心. 所有课程按照DDL的大小来排序. 维护一个当前时间curTime,初始为0. 遍历课程,curTime加上此课程持续时间d,如果这时cu ...

  2. phpStudy mysql升级至5.7

    1.先停止mysql服务,卸载原来的mysql (其他菜单-->服务器管理--->MySQL--->卸载服务) 2.下载MySQL你需要的版本 ZIP Archive 版本 3.解压 ...

  3. 关于禁止html缓存

    在现代的浏览器里,为了增强用户体验,浏览器一般都会把网页上所需的静态文件缓存到本地,再次刷新的时候则无需再重新加载,但是我们有时候就是不需要浏览器缓存这些文件,而是每次都从服务器端读取数据,可以用以下 ...

  4. springMVC流程分析

    下面是DispatcherServlet的doDispatch()方法 protected void doDispatch(HttpServletRequest request, HttpServle ...

  5. 12 Callable & Future & FutureTask

    创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需要获取执行结果,就必须通过共享变量或者使用 ...

  6. 关于对Enum的理解

    之前一直对枚举类型的理解存在误解,现重新学习 Enum 类型的介绍 枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则 ...

  7. NetXray

    NetXRay是由Cinco Networks公司开发的一个用于高级分组检错的软件,功能很强大.IP地址查询工具. 硬件要求 对硬件要求低,可运行常用的windows平台. 主要功能 1.监视网络状态 ...

  8. push到github报错解决方法

    在push代码到远程仓库时,报了如下的错误: $ git push -u origin master To https://github.com/11pdg/group-buy.git ! [reje ...

  9. Greenplum表定义

    GP中的table和其它关系型数据表是一样的,除了数据被分布在不同的segment以外. 在建表的时候必须申明分布键distribution policy. 建表需定义下面几个方面: 1. 指定列和数 ...

  10. SQL Server讲义

    今天上班都在搞猫商品详情页的实现,回到家还在想,琅琊榜也看完了,没事做了,最近也想了解下MongoDb就复习了下大学老师当时SQL Server的讲义(真经),看了一遍还算有印象.虽然现在大部分都用O ...