代码如下

//主要就是用css动画实现的

<!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>Document</title>

    <style>

        .jser_dimple{

            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="jser_dimple">

        jser_dimple

    </div>

</body>

</html>

本文看自:https://www.cnblogs.com/zhengshize/p/10573588.html

CSS实现火焰效果的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. css简单实现火焰效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 简单说 通过CSS的滤镜 实现 火焰效果

    说明 上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果. 解释 要实现上面的火焰效果,我们先来了解一些必要的东西. 上次我 ...

  4. CSS自学笔记（12）:CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  5. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  6. CSS 火焰？不在话下

    正文从下面开始. 今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰. 嗯,长什么样子?在 CodePen 上输入关键字 CSS Fire,能找到这样的: 或者这样的: 我们希望,仅仅使用 CSS ...

  7. 如何用 CSS 和 D3 创作火焰动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJdVxx 可交互视频 ...

  8. CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  9. Three.js 火焰效果实现艾尔登法环动态logo 🔥

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Log ...

随机推荐

  1. JavaScrip中的循环语句

    循环语句 循环语句,也是流程控制语句中不可或缺的一种结构.在 JavaScrip中实现循环的方式有好几个一个来看 1.为什么需要循环 在具体介绍 Javascript中的循环之前,首先我们来明确一个问 ...

  2. 杂项-公司：Microsoft

    ylbtech-杂项-公司:Microsoft 微软,是一家美国跨国科技公司,也是世界PC(Personal Computer,个人计算机)软件开发的先导,由比尔·盖茨与保罗·艾伦创办于1975年,公 ...

  3. SpringBoot 03_利用FastJson返回Json数据

    自上一节:SpringBoot 02_返回json数据,可以返回json数据之后,由于有些人习惯于不同的Json框架,比如fastjson,这里介绍一下如何在SpringBoot中集成fastjson ...

  4. Linux虚拟机ip为127.0.0.1的处理

    Redhat系列(Cnetos)打配置文件在/etc/sysconfig/network-scripsts/ifcfg-eth0(在Centos6.5开始就有这种情况了) 打开配置文件找到ONBOOT ...

  5. hive新加入字段插入数据需要注意事项

    hive中新加字段需要注意如下 1)如果表中有分区字段,必须先删除分区才能插入数据否则为null; 2)insert override TABLE table1 select counm1,counm ...

  6. 动态库加载时GetLasterror();值总是126的原因

    1.dll路径不正确,导致找不到dll文件. 2.有可能是你要载入的DLL在内部还需要载入其它的dll,而它不存在,同样会返回126错误代码.比如一个你给系统添加了一个PCI设备,像AD采集卡之类的, ...

  7. 关于bind

    1, 目的 使程序可以感知到事件 2, 格式 widget.bind(event, handler) 3, handler注意事项 在这里, handler作为一个函数, 是需要一个event对象作为 ...

  8. Creating a bootable Ubuntu USB stick

    Windows: https://tutorials.ubuntu.com/tutorial/tutorial-create-a-usb-stick-on-windows#0 Ubuntu: http ...

  9. [转]模块化——Common规范及Node模块实现（二）

    模块的循环加载 如果发生模块的循环加载,即A加载B,B又加载A,则B将加载A的不完整版本. // a.js exports.x = 'a1'; console.log('a.js ', require ...

  10. 稀疏表示step by step(转)

    原文地址:稀疏表示step by step(转)作者:野火春风 稀疏表示step by step(1)     声明:本人属于绝对的新手,刚刚接触“稀疏表示”这个领域.之所以写下以下的若干个连载,是鼓 ...