代码如下

//主要就是用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. Extjs4 desktop 图标自动换行,横纵排列 图标大小修改

    一.图标换行 /*! * Ext JS Library 4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http:/ ...

  2. linux 最新化安装后安卓 KDE 桌面

    yum -y install epel-releaseyum -y groupinstall "X Window System"yum -y groupinstall " ...

  3. python基础-基础知识考试_day5 (包括：函数_递归等知识）

    老男孩 Python 基础知识练习(三) 1.列举布尔值为 False 的值空,None,0, False, '', [], {}, () 2.写函数:根据范围获取其中 3 和 7 整除的所有数的和, ...

  4. php构造方法(函数)基础

    什么是构造函数呢?在回答这个问题之前,我们来看一个需求:我们在创建人类的对象时,是先把一个对象创建好后,再给他的年龄和姓名属性赋值,如果现在我要求,在创建人类的对象时,就指定这个对象的年龄和姓名,该怎 ...

  5. Maven实战08_仓库

    何为Maven仓库 在Maven世界中.任何一个依赖.插件或者项目构建的输出,都可以称之为构件.例如依赖log4j-1.2.15.jar是一个构件,差价maven-compile-plugin-2.0 ...

  6. ES6之主要知识点（七）对象

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. function f(x, y) { return {x, y}; } // 等同于 function ...

  7. Activiti历史查看

    流程执行完毕后,究竟去了哪里有些疑问. 虽然已完成的任务在act_ru_task和act_ru_execution表中都已被删除,但是这些数据还存在activiti的数据库中,作为历史改由Histor ...

  8. PIL的ImageDraw的颜色问题

    因为我的图片的单通道的,所以用 draw = ImageDraw.Draw(image) im_width, im_height =], info[], info[], info[]) color=d ...

  9. sql里面插入语句insert后面的values关键字可省略

    插入到表名(列值)后跟一个查询语句的话就代表值,简单的说就是后面select select出来的值就是要插入的值,即  insert into tb(字段名一,字段名二)select 字段名一,字段名 ...

  10. jdk11下载安装及环境变量配置

    jdk11下载安装及环境变量配置 官网地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk11-downloads-50666 ...