动画的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. leetcode-887-三维形体投影面积

    题目描述: 在 N * N 的网格中,我们放置了一些与 x,y,z 三轴对齐的 1 * 1 * 1 立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. ...

  2. QuantLib 金融计算——QuantLib 入门

    目录 QuantLib 金融计算--QuantLib 入门 简介 主要功能 安装与使用 学习指南 The HARD Way The EASY Way QuantLib 金融计算--QuantLib 入 ...

  3. CODEVS-新斯诺克

    原题地址:新斯诺克 题目描述 Description 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分别为1 个白球,15 个红球和6 个彩球(黄 ...

  4. [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式

    [From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...

  5. python 网络编程之socket开发和socketserver模块

    一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视频 ...

  6. PowerDesigner16 生成的备注脚本，在sql server 2008 中报“对象名 'sysproperties' 无效”的错误的解决办法

    主要是在建模时我们对表.列增加了些说明注释,而Sql2005之后系统表sysproperties已废弃删除而改用sys.extended_properties所致. 1.修改Table TableCo ...

  7. Vagrant 创建虚拟机

    Vagrant  创建虚拟机 1. 下载相关软件 虚拟机软件:vmware  virtualbox Vagrant 软件:vagrant cd /tmpwget http://download.vir ...

  8. Python爬虫学习：一些关于爬虫的知识的充电

    什么是Http和Https http协议:全称是HyperText Transfer Protocol,中文意思是超文本传输协议,是一种发布和接收Html页面的方法.默认的端口号是80 https协议 ...

  9. Java 中 String 的常用方法（一）

    上一篇介绍了 String 中的几个常用构造方法,由 String 这个核心对象发散出去关于字符的编码,字符的字节表达,对 GC 的影响,正则表达式,模式匹配,这可能是 Java 里内涵最丰富的对象了 ...

  10. Datenstruktur und Algorithmus

    In der Informatik und Softwaretechnik ist eine Datenstruktur ein Objekt zur Speicherung und Organisa ...