代码如下

//主要就是用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. JS的高阶函数

    JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 这就是最简单的高阶函数啦 functio ...

  2. some方法过滤

    // 已经存在该tab时跳过 this.tabs.some(item => item.title === option.title) || this.tabs.push(option)

  3. diskpart

    比如格式化成fat32 format fs=fat32 quick 比鼠标方便 如何使用: 打开cmd输入diskpart进入命令 首先 list disk 然后 然后 clean 然后 create ...

  4. pycharm使用教程链接+部分练习题01

    pycharm安装: https://www.cnblogs.com/jin-xin/articles/9811379.html pycharm使用教程: https://edu.51cto.com/ ...

  5. <每日一题>题目20：简单python练习题(11-20)

    #11.编写程序,输入一个自然数,输出它的二进制.八进制.十六进制表示形式 Num = input("请输入任性自然数:") Num = eval(Num) print(" ...

  6. 详解 equals() 方法和 hashCode() 方法

    创建实体类时,最好重写超类(Object)的hashCode()和equals()方法 equals()方法: 通过该实现可以看出,Object类的实现采用了区分度最高的算法,即只要两个对象不是同一个 ...

  7. windows API 第13篇 MoveFileEx

    上一篇介绍了MoveFile,这次分析MoveFileEx,它是MoveFile的扩展函数,功能还要更加强大些.先看定义: BOOL WINAPI MoveFileEx( _In_     LPCTS ...

  8. [转]Visual Studio 2010单元测试（1）－－运行和定义普通单元测试

    Visual Studio 2010 运行和定义单元测试 在VS2010中,单元测试的功能很强大,使得建立单元测试和编写单元测试代码,以及管理和运行单元测试都变得简单起来,通过私有访问器可以对私有方法 ...

  9. （转）nodejs

    在写node.js代码时,我们经常需要自己写模块(module).同时还需要在模块最后写好模块接口,声明这个模块对外暴露什么内容.实际上,node.js的模块接口有多种不同写法.这里作者对此做了个简单 ...

  10. myeclipse 配置resin

    一.新建web project 二.配置本地resin 创建resin/conf/test.conf文件(可从resin.conf copy)中修改 <web-app id="/&qu ...