代码如下

//主要就是用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. LintCode_389 判断数独是否合法

    题目 请判定一个数独是否有效. 该数独可能只填充了部分数字,其中缺少的数字用 . 表示. 注意事项 一个合法的数独(仅部分填充)并不一定是可解的.我们仅需使填充的空格有效即可. 说明 什么是 数独? ...

  2. Android基础控件ListView和自定义BaseAdapter适配器

    1.简介 ListView用于列表显示,相当于OC中的TableView,和适配器一块使用,相关属性: footerDividersEnabled:是否在footerView(表尾)前绘制一个分隔条, ...

  3. vue报错 error: data.push is not a function

    data定义出错,data需定义为一个数组 => data : [ ]

  4. 在ALV点击Key值调用TCode，跳过初始屏幕

    在开发ALV报表时,通常业务部门会要求在ALV中点击单据号,屏幕跳转到具体业务凭证中查看业务明细,效果如下图: 点击销售销售订单号或者交货单号可传入单据号直接打开销售订单或交货单,实现方式如下: 一. ...

  5. bootstrap-select 插件示例

      本文原创地址:http://www.cnblogs.com/landeanfen/p/7457283.html 一.组件开源地址以及API说明 bootstrap-select开源地址:https ...

  6. 2019-1-10-WPF-使用-RenderTargetBitmap-快速截图出现-COMException-提示

    title author date CreateTime categories WPF 使用 RenderTargetBitmap 快速截图出现 COMException 提示 lindexi 201 ...

  7. vue-admin-template模板添加screenfull全屏插件

    先安装screenfull:npm install screenfull@4.2.0 --save    (注意版本号) 一.在\src\components目录下创建Screenfull文件夹,创建 ...

  8. Nginx报错汇总

    1.     Nginx 无法启动解决方法 在查看到 logs 中报了如下错误时: 0.0.0.0:80 failed (10013: An attempt was made to access a ...

  9. Linux C类型

    BOOL: http://www.cnblogs.com/pharen/archive/2012/02/06/2340257.html GCC编译器参数介绍: http://blog.csdn.net ...

  10. 改变swiper 按钮swiper-button-next 颜色

    温馨提示:一般如果一个项目只需要一两处使用swiper时,不需要把swiper的css文件引进去,只需要把需要的几个类在swiper.css中复制出来,粘贴到自己的项目css中即可. 改变按钮颜色(红 ...